Я пытаюсь сделать цвет фона смены div, когда изображение под div перевернулось, а также когда перевернут сам div.
Пока я могу получить цвета изменения div при опрокидывании, но когда у меня больше 1 изображения на странице, перекатывающейся по изображению, меняется цвет фона всех остальных divs
Возможно, я не буду писать это наиболее понятным способом. Но код и скрипка должны помочь
Html:
<a href="test.html">
<div style ="width:233px; float:left; position:relative; margin-right:17px; margin-bottom:20px; ">
<div style="position:absolute; top:0; left:0; width:213px; height:20px; display:block; float:left; color:#fff; padding:10px; background-color: #000; opacity:0.8; " class="cat_top_bar" >image name </div>
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="233" height="233" class="img_cat" >
</div>
</a>
<a href="test.html">
<div style ="width:233px; float:left; position:relative; margin-right:17px; margin-bottom:20px; ">
<div style="position:absolute; top:0; left:0; width:213px; height:20px; display:block; float:left; color:#fff; padding:10px; background-color: #000; opacity:0.8; " class="cat_top_bar" >image name </div>
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="233" height="233" class="img_cat" >
</div>
</a>
Jquery:
$(".cat_top_bar").hover(function () {
$(this).animate({
backgroundColor: '#f49000',
opacity: 0.98
}, 100);
},
function () {
$(this).animate({
backgroundColor: '#000',
opacity: 0.8
},100);
});
$(".img_cat").hover(function () {
$(".cat_top_bar").animate({
backgroundColor: '#f49000',
opacity: 0.98
}, 100)
},
function () {
$(".cat_top_bar").animate({
backgroundColor: '#000',
opacity: 0.8
},100);
});
Я думаю, что это скорее вопрос css, чем что-либо, поскольку я не уверен, как я могу выбрать родительский div. На самом деле это не настоящий родитель.
Вы можете сделать это, используя prev():
$(".img_cat").hover(function () {
$(this).prev(".cat_top_bar").animate({
backgroundColor: '#f49000',
opacity: 0.98
}, 100)
},
function () {
$(this).prev(".cat_top_bar").animate({
backgroundColor: '#000',
opacity: 0.8
},100);
});
Демо- скрипт
В обработчике события jQuery this
является целью события. Оттуда вы можете использовать функции обхода jQuery для поиска связанных элементов:
$(".img_cat").hover(function () {
$(this).siblings(".cat_top_bar").animate({
backgroundColor: '#f49000',
opacity: 0.98
}, 100)
},
function () {
$(this).siblings(".cat_top_bar").animate({
backgroundColor: '#000',
opacity: 0.8
}, 100);
});
$(this).prev('.cat_top_bar')
также будет работать, как и $(this).parent().find('.cat_top_bar')
. Есть много способов пройти DOM, но ключ начинается с this
.
Для выбора parent-div (который на самом деле не является родителем, а является родным братом) вы можете использовать jQuery prev()
Если перемещение курсора из img
в .cat_top_bar
и наоборот, не нужно запускать фоновое анимацию, вы можете также привязать обработчик hover
к родительскому объекту, поэтому вам не придется дублировать код анимации. http://jsfiddle.net/ffB8k/3/
$("a").hover(function () {
$(this).find('.cat_top_bar').animate({
backgroundColor: '#f49000',
opacity: 0.98
}, 100);
},
function () {
$(this).find('.cat_top_bar').animate({
backgroundColor: '#000',
opacity: 0.8
},100);
});
$(".cat_top_bar").hover(function () {
$(this).animate({
backgroundColor: '#f49000',
opacity: 0.98,
}, 100).css({"z-index":"12"});
},
function () {
$(this).animate({
backgroundColor: '#000',
opacity: 0.8
},100);
});
$(".img_cat").hover(function () {
$(this).parent().children().animate({
backgroundColor: '#f49000',
opacity: 0.98
}, 100).css({"z-index":"12"});
},
function () {
$(".cat_top_bar").animate({
backgroundColor: '#000',
opacity: 0.8
},100);
});
Используйте z-index и parent() и children()