将悬停动作限制为仅限其特定子级 jQuery 2.1.3答案

【问题标题】：Limit hover action to it's specfic children only jQuery 2.1.3将悬停动作限制为仅限其特定子级 jQuery 2.1.3
【发布时间】：2016-01-09 03:55:45
【问题描述】：

我正在尝试将悬停动作限制为特定的子元素。 IE。当我将鼠标悬停在 Image Here 上时，应该只出现 100 万个 Team 和 wordpress，而当我将鼠标悬停在 Image Here #1 上时，应该只出现 200 万个 Team 和 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;
}

【问题讨论】：

没有jQuery('doucment').ready。文档不能是字符串，必须引用window.document。

标签： javascript jquery html css jsfiddle

【解决方案1】：

你需要改变你的选择器：

jQuery('.b29_work_hover', this)

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

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

有什么问题？

jQuery('doucment') 应该是 jQuery(document)
您正在定位所有具有.b29_work_hover 类名的元素。
您没有给出选择器的上下文 this。

注意：

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

【讨论】：

操作，对不起，我的错误，它运行完美。谢谢队友
jQuery('doucment') 这不应包含在引号中，并且关键字document 中有错字。

【解决方案2】：

替换这个：

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

通过这个：

jQuery('.b29_work_img').hover(function () {
        jQuery(this).find(".b29_work_hover").css({
            opacity: 0.8
        });
    }, function () {
        jQuery(this).find(".b29_work_hover").css({opacity: 0});
    });

Here is the JSFiddle demo

基本上你使用this 和find 来查找当前悬停元素下的元素并更改不透明度。

【讨论】：

@GeeK only jQuery(this).find() 已添加 ;) 欢迎您

【解决方案3】：

jQuery('.b29_work_img:first').hover(function () {
    jQuery(".b29_work_hover:first").css({
        opacity: 0
    });
    jQuery(".b29_work_hover:last").css({
        opacity: 0.8
    });
});

jQuery('.b29_work_img:last').hover(function () {
    jQuery(".b29_work_hover:first").css({
        opacity: 0.8
    });
    jQuery(".b29_work_hover:last").css({
        opacity: 0
    });
});

【讨论】：

谢谢serenesat！我是stackoverflow的新手，所以我对结构和一些功能不太熟悉。感谢您的帮助！

【解决方案4】：

这是答案，我想你想看到当你将鼠标悬停在一张图片上时，它的父元素应该出现。

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

【讨论】：