Jquery hover() 在图像上答案

【问题标题】：Jquery hover() over imageJquery hover() 在图像上
【发布时间】：2014-05-27 20:43:15
【问题描述】：

当用户将鼠标悬停在图像上时，我正在尝试创建一个功能，然后会出现一个锚元素。然后，用户可以单击锚标签以跟随链接。当用户没有悬停图像时，它会消失。

当我将鼠标悬停在图像上时使锚标记出现效果很好，但是当我将鼠标悬停在锚标记上时，它消失了。原因是当锚元素出现时，鼠标不再直接悬停在图像上。 Soooo基本上，我的策略不起作用。有人可以建议一种方法吗？

HTML // 我有一个 div 和一个 无序列表。每个 li 都有一个 img 和一个 anchor

    <div id="img_container">

         <ul>
            <li>
                <img src="img/first.jpg" width="260px" height="260px">
                <a href="#">Click Here To Visit </a>
            </li>
            <li>
                   <img src="img/second.jpg" width="260px" height="260px">
                <a href="#"> Click Here To Visit </a>
            </li>
            <li>
                <img src="img/third.jpg" width="260px" height="260px">
                <a href="#"> Click Here To Visit </a>
            </li>
        </ul>

    </div>

JQUERY

 $(document).ready(function(){ 
    $("#img_container img").hover(
      function(){
        $(this).next().css("visibility","visible");
       }, function(){
        $(this).next().css("visibility","hidden");
       }

    );

});// end of ready

【问题讨论】：

为什么不将鼠标悬停在列表元素上...

标签： jquery html css hover

【解决方案1】：

只需将 CSS 用于这样简单的事情：

#img_container li a {
    /* current styles */
    visibility: hidden;
}
#img_container li:hover a {
    visibility: visible;
}

这会默认隐藏a 元素，然后在您将鼠标悬停在父li 上时显示它们。

它正在运行：http://jsfiddle.net/sPL73/

如果您只希望as 在将鼠标悬停在图像上时可见，请改用：

#img_container li a {
    /* current styles */
    visibility: hidden;
}
#img_container img:hover + a, #img_container li a:hover {
    visibility: visible;
}

这使用 CSS3 的 adjacent sibling selector 来选择悬停在图像旁边的 a。这是一个演示：http://jsfiddle.net/4wcQr/

【讨论】：

很多不同的答案。我从他们身上学到了很多。感谢你们的时间！

【解决方案2】：

你可以直接use LI 代替：

$("#img_container li").hover(
    function(){
        $(this).find('a').css("visibility","visible");
    }, function(){
        $(this).find('a').css("visibility","hidden");
    }      
);

【讨论】：

【解决方案3】：

绑定到列表元素而不是图像。然后相应地淡入和淡出锚标记：

$(function(){ 
    $("#img_container li").hover(function () {
        $(this).find('a').fadeIn();
    }, function () {
        $(this).find('a').fadeOut();
    });
});

【讨论】：

【解决方案4】：

您可以将hover 处理程序附加到<li>，如前所述，或者或者将其附加到<img> 和<a>。

如果您不想依赖<li> 元素的边界，这可能会很有用。

这是一个小提琴：http://jsfiddle.net/5z4RL/3/

$(document).ready(function(){ 
    $("#img_container img, #img_container a").hover(
        function(){
            $(this).parent().find("a").css("visibility","visible");
        }, function(){
            $(this).parent().find("a").css("visibility","hidden");
        }

    );

});// end of ready

【讨论】：

【解决方案5】：

将事件分配给您的 LI~~，并使用 .mouseenter() 和 .mouseleave 而不是 hover()。这样，只要您的光标位于元素或其任何子元素上，该事件就仍然处于活动状态。~~

【讨论】：

hover 是 mouseenter/mouseleave 的简写
啊，你是对的。那么，这里的关键是事件绑定到的元素，正如其他人提到的那样。