Question

我试图在悬停时更改.space颜色。它从红色开始，但当悬停在整个区域（包括图像）上时，红色部分应变为黑色。这可能吗？

.space {
    background: red;
    width:100%;
  height:auto;
  display:block
}

.space a: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 {
    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/

让.space在悬停时改变颜色

2 个答案: