`` зависание работает в инспекторе, но не в фактическом браузере

Question

У меня возникают проблемы с некоторыми div, которые должны меняться от фонового изображения до цвета фона при зависании. Если вы попытаетесь запустить мой кусок кода, который я разместил ниже, вы обнаружите, что он работает, однако я использую тот же код на www.pieterswebdesign.com/desktop/index.html, и там, если я нахожу изображения на сайте, ничего не происходит ....

Также, когда вы вынуждаете состояние зависания в инспекторе, это действительно работает ... Кто-нибудь знает проблему здесь?

#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 1

Благодаря не очищая float, следующий элемент «покрытие» ваши четыре плитки, так что мышь не может пройти.

Просьба добавить overflow:hidden в контейнер .

Answer 2

#kijkerdivtxt1 div перекрывает вышеуказанный класс-оболочку, который обертывает ваши изображения (поскольку высота оберток не равна его дочерним элементам), что предотвращает запуск события зависания.

Вы можете установить любые одно из свойств для класса-оболочки

.wrapper { 
    display: inline-block; 
    overflow: hidden; 
}