Jquery 如何仅选择"；“家长”；图像的div

我试图使一个div改变背景颜色，当div下面的图像被翻转时，以及当div本身被翻转时

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

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

Html:

---

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

您可以使用以下方法进行此操作：

---

演示

您可以使用以下方法进行此操作：

---

演示

在jQuery事件处理程序中，

此

是事件的目标。从这里，您可以使用jQuery查找相关元素：

---

$（this）.prev（'.cat\u top\u bar'）

也可以工作，就像

$（this.parent（）.find（'.cat\u top\u bar'）

一样。有很多方法可以遍历DOM，但是关键是从jQuery事件处理程序中的

this

开始，而

this

是事件的目标。从这里，您可以使用jQuery查找相关元素：

---

$（this）.prev（'.cat\u top\u bar'）

也可以工作，就像

$（this.parent（）.find（'.cat\u top\u bar'）

一样。有很多方法可以遍历DOM，但关键是从

this

开始选择父div（实际上不是父div，而是同级div），您可以使用jQuery的选择父div（实际上不是父div，而是同级div），如果将光标从

img

移动到

，则可以使用jQuery的。cat\u top\u bar

也可以使用jQuery。反之亦然，不必触发背景动画。您还可以将

悬停

处理程序附加到父级，因此不必复制动画代码

---

如果将光标从

img

移动到

.cat\u top\u bar

，反之亦然，则不必触发背景动画，也可以将

悬停

处理程序附加到父对象，这样就不必复制动画代码

使用z索引和父项（）和子项（）

---

使用z-index和parent（）和children（）

啊，太好了！不知道。普雷瓦很好！我不知道。上一篇

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

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

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

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