. 호버로 이동할 때 .space를 변경하십시오.

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/