javascript - 仅将悬停 Action 限制在其特定子项 jQuery 2.1.3

Question

我试图将悬停 Action 限制在它的特定子元素上。IE。当我将鼠标悬停在 Image Here 上时，应该只显示 100 万个团队和 wordpress，当我将鼠标悬停在 Image Here #1 上时，应该只显示 200 万个团队和 wordpress。 see link

jQuery 2.1.3

    jQuery('doucment').ready(function () {
    jQuery('.b29_work_img').hover(function () {
        jQuery('.b29_work_hover').css({
            opacity: 0.8
        });
    }, function () {
        jQuery('.b29_work_hover').css({opacity: 0});
    });
});

HTML

    <!-- our work -->
<div id="b29_our_work">
    <div class="b29_container">
        <div class="b29_row">
            <div class="b29_col b29_col_3 b29_work">
                <div class="b29_row">
                    <div class="b29_col b29_col_3 b29_work_img">
                         <h1>Image HERE</h1>

                        <div class="b29_work_hover">
                             <h4>1 Million Teams</h4>

                             <h5>Wordpress</h5>

                        </div>
                    </div>
                    <div class="b29_col b29_col_3 b29_work_img">
                         <h1>Image HERE # 1</h1>

                        <div class="b29_work_hover">
                             <h4>2 Million Teams</h4>

                             <h5>Wordpress 4.3</h5>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

    .b29_work_hover {
    opacity:0;
}

Answer 1

你需要改变你的选择器:

jQuery('.b29_work_hover', this)

或者你可以使用.find()方法:

jQuery(this).find('.b29_work_hover')

---

问题是什么？

1. jQuery('doucment') 应该是 jQuery(document)
2. 您的目标是具有 .b29_work_hover 类名的所有元素。
3. 您还没有给出 this 选择器的上下文。

---

注意:

js 中的所有类选择器，如 document.getElementsByClassName("className") 或库，如 jQuery $(".className") 总是返回所有的列表页面上可用的元素。