Question

当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>

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);
                });

http://jsfiddle.net/ffB8k/

我认为这更像是一个css问题，而不是因为我不知道如何选择父div。这不是真正的父母，就在此之前。

Answer 1

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

演示Fiddle

Answer 2

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

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开始。

Answer 3

为了选择父 -div（实际上不是父，而是兄弟），你可以使用jQuery的prev()

Answer 4

如果将光标从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);
});

Answer 5

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

如何仅选择图像的“父”div

5 个答案: