有懸停時改變顏色

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/