Question

我在与css的链接上悬停，现在我尝试用jquery，但我失败了。有人可以解释如何在链接上使用？或者举例？

HTML：

<div id="nav_virsus">
    <ul>
        <li><a href="#"><img src="images/pagrindinis.png" alt="Pagrinidnis" /></a></li>
        <li><a href="#"><img src="images/forumas.png" alt="Forumas" /></a></li>
        <li><a href="#"><img src="images/unban.png" alt="Atsibaninti" /></a></li>
        <li><a href="#"><img src="images/banai.png" alt="Banai" /></a></li>
    </ul>
</div>

CSS：

#nav_virsus li a 
{
    color:#b8d9ff;
    text-decoration:none;
    padding:20px 5px 20px 5px;
}

#nav_virsus li a:hover
{
    background:url(../images/hover.png) repeat-x;
    color:#000;
    text-decoration:none;
    padding:21px 5px 20px 5px;
}

jquery的：

$(document).on('mouseenter', 'img.a', function() {
  console.log('mouseenter');
  $(this).parent().next().find('.b').stop().animate({"opacity": "1"}, 600);
});

$(document).on('mouseleave', 'img.a', function() {
  console.log('mouseleave');
  $(this).parent().next().find('.b').stop().animate({"opacity": "0"}, 500);
});

Answer 1

选择正确的选择器：

$('.a').on('mouseenter', function(e){
    //do stuff
})

$('.a').on('mouseleave', function(e){
    //do other stuff
})

工作Fiddle

Answer 2

使用JQuery，使用语法：$([selector]).mouseover([function]);和$([selector]).mouseout([function]);。像：

$("a img").mouseover(function() {
  console.log('mouseenter');
  $(this).parent().next().find('.b').stop().animate({"opacity": "1"}, 600);
});

滚动悬停在链接上

2 个答案: