raulbaros raulbaros - 4 months ago 7
HTML Question

Have .space to change color upon hover

I am trying to change the .space color upon hover. It starts with being red, but when hover over the whole area including image, then the red part should turn black. Is that possible?



.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

Your hover selector is incorrect. Change it to .space:hover.

Your current selector is trying to find and <a> inside of .space that is being :hovered.