raulbaros raulbaros - 1 year ago 60
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;

.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>

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download