Pieter Pieter - 2 months ago 5
HTML Question

``hover state works in inspector but not in the actual browser

I am having issues with some divs who are supposed to change from a background image to a background color when hovered. If you try to run my piece of code I posted below you will find that it works, however i am using the same code on www.pieterswebdesign.com/desktop/index.html and there if i hover the images on the site nothing happens....

Also when you force the hover state in the inspector it does work...
anybody knows the issue here?



#kijker1div {
width: 55%;
padding-bottom: 31.5%;
position: relative;
float: left;
margin-right: .5%;
background-image: url(images/kijker1.png);
background-size: cover;
text-align: center;
}
#kijker2div {
width: 44.5%;
padding-bottom: 40%;
position: relative;
float: left;
margin-bottom: 1.25%;
background-image: url(images/kijker2.png);
background-size: cover;
background-position: 50%;
text-align: center;
}
#kijker3div {
width: 55%;
padding-bottom: 37%;
position: relative;
float: left;
margin-top: -9.25%;
margin-right: .5%;
background-image: url(images/kijker3.png);
background-size: cover;
text-align: center;
}
#kijker4div {
width: 44.5%;
padding-bottom: 28.5%;
margin-top: -.75%;
position: relative;
float: left;
background-image: url(images/kijker4.png);
background-size: cover;
background-position: 50% 50%;
text-align: center;
}
#kijker1div:hover {
background-color: #3498db;
background-image: none;
}
#kijker2div:hover {
background-color: #e74c3c;
background-image: none;
}
#kijker3div:hover {
background-color: #9b59b6;
background-image: none;
}
#kijker4div:hover {
background-color: #1abc9c;
background-image: none;
}

<div class="wrapper">
<div id="kijker1div" class="kijkerdiv"></div>
<div id="kijker2div" class="kijkerdiv"></div>
<div id="kijker3div" class="kijkerdiv"></div>
<div id="kijker4div" class="kijkerdiv"></div>


</div>




Answer

Due to not clearing the float, the following element is "covering" your four tiles so the mouse can't get through.

Try adding overflow:hidden to the container.

Comments