ホバリング時に色を変更するスペース。

Question

ホバリング時に.spaceの色を変更しようとしています。それは赤で始まりますが、画像を含む全領域にカーソルを移動すると、赤い部分が黒くなります。それは可能ですか？

.space { 
 
    background: red; 
 
    width:100%; 
 
    height:auto; 
 
    display:block 
 
} 
 

 
.space a:hover { 
 
\t background-color: #000; 
 
\t text-decoration: none; 
 
\t -moz-transition: .6s ease-in-out; 
 
\t -webkit-transition: .6s ease-in-out; 
 
\t -o-transition: .6s ease-in-out; 
 
\t -ms-transition: .6s ease-in-out; 
 
\t transition: .6s ease-in-out; 
 
} 
 

 
.img { 
 
    float: right; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a href="#" class="space"> 
 
      <img src="https://placeimg.com/100/100/any"> 
 
      <p>The biggest car</p> 
 
</a>

Answer 1

あなたのホバーセレクターが正しくありません。それを.space:hoverに変更してください。

現在のセレクターが<a>の中にある.spaceのうち、:hoverを検索しようとしています。

Answer 2

あなたはそれを実行する必要があります。

.space { 
    background: red; 
    width:100%; 
    height:auto; 
    display:block 
} 
.space:hover { 
    background-color: #000; 
    text-decoration: none; 
    -moz-transition: .6s ease-in-out; 
    -webkit-transition: .6s ease-in-out; 
    -o-transition: .6s ease-in-out; 
    -ms-transition: .6s ease-in-out; 
    transition: .6s ease-in-out; 
} 

.img { 
    vertical-align: middle; 
} 

例：https://jsfiddle.net/hectoruch/f3qnq9Ls/

意味し、すべての領域にホバープロパティを変更