0

当 div 下方的图像翻转以及 div 本身翻转时，我试图让 div 更改背景颜色。

到目前为止，我能够让 div 在翻转时更改颜色，但是当我在页面上有超过 1 个图像滚动时，图像也会更改所有其他 div 的背景颜色

我可能不是用最容易理解的方式写这个。但是代码和小提琴应该会有所帮助

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>

查询：

$(".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);
                });

http://jsfiddle.net/ffB8k/

我认为这更像是一个 css 问题，因为我不确定如何选择父 div .. 就在之前，这不是真正的父级。

4

5 回答 5

3

您可以通过使用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);
                });

演示小提琴

于 2013-09-20T14:29:10.887 回答
2

在 jQuery 事件处理程序中，this是事件的目标。从那里，您可以使用 jQuery遍历函数来查找相关元素：

http://jsfiddle.net/8vGNM/

$(".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.

于 2013-09-20T14:29:33.320 回答
0 
$(".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()

于 2013-09-20T14:41:42.513 回答
0

对于选择父级 -div（实际上不是父级，而是兄弟级），您可以使用 jQuery 的prev()

于 2013-09-20T14:29:39.500 回答
0

如果将光标从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);
});
于 2013-09-20T14:33:51.433 回答