У меня есть HTML, как показано ниже:
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="span7">
<div class="home-image left-image">
<img class="photography-left-top" src="http://placehold.it/700x440" />
<p class="image-text_left">Wedditng Photography</p>
</div>
<h5>Heading</h5>
</div>
<div class="span5">
<div class="home-image right-image right-image-top">
<img class="photography-right-top" src="http://placehold.it/400x200" />
<p class="image-text_right-top">Fashion Photography</p>
</div>
<div class="home-image right-image right-image-bottom">
<img class="photography-right-bottom" src="http://placehold.it/400x200" />
<p class="image-text_right-bottom">Contact</p>
</div>
<h5>Heading</h5>
</div>
</div>
</div>
И CSS:
.home-image {
position:relative;
}
.photography-left-top,.photography-right-top,.photography-right-bottom {
position : absolute;
}
.image-text_left {
display:none;
position:absolute;
width:300px;
top:200px;;
left:200px;
z-index : 100;
font-weight:bold;
}
.image-text_right-top,.image-text_right-bottom {
display:none;
position:absolute;
width:300px;
top:100px;
left:100px;
z-index : 100;
font-weight:bold
}
.right-image-bottom {
margin-top:220px;
position:relative
}
.right-top {
position:relative
}
.home-img-hover {
background:#911717;
}
JS:
$(document).ready(function(){
$(".left-image").hover(function () {
$(this).find('.photography-left-top').fadeTo('slow',0);
$(this).addClass('home-img-hover');
$('.image-text_left').show();
},
function () {
$(this).find('.photography-left-top').fadeTo('400',1.0);
$('.image-text_left').hide();
});
Поскольку addClass('home-img-hover')
добавит класс к текущему class
я ожидал цвет фона, когда наводил на left-image
. Но его отображение белого фона по умолчанию. Зачем?
Он делает именно то, что вы ожидаете, вы просто не видите его, потому что .home-image
не имеет высоты, потому что все внутри него выводится из нормального потока документов (с position:absolute
). Попробуйте присвоить .home-image
некоторые размеры, и вы увидите, что я имею в виду:
.home-image {
position:relative;
width:400px;
height:240px;
}
Вот ваша проблема, ваша высота div на самом деле равна 0px
.
Просто добавь
height: 240px;
width: 400px;
к .home-image
, и вы увидите, что ваш код действительно работает.