Javascript 图像覆盖正在闪烁？

****事实上，所有这些解决方案都有效，只是不适用于项目，所以我将重新提出这个问题，稍微不同****

基本上，我有一个图像，当有人将鼠标光标移到它上面时，它会显示一个div（包含一个图像，也称为play按钮）。当他们移动光标到图像外时，“播放”按钮消失

这是可行的，但是如果你把咒语移到播放按钮上，它会疯狂地弹开，因此我一定是把我的事件搞混了

提前感谢您的帮助

HTML

---

问题是鼠标移到新图像上会导致原始图像上的鼠标移出。尝试改用

hover（）

以及这两个元素作为选择器

$(document).ready(function() {
    $('#art').hide();
    $('#imgSmile, #art').hover(
        function() {
            $('#art').show();
        }, function() {
            $('#art').hide();
        }
    );
});

您可以使用

.on（）

方法，然后将两个元素都设置为选择器，并使用事件

（e）

检查器，如：

---

我最喜欢的是三元运算符的使用，如：

$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
    var et = e.type === 'mouseenter' ? $('#art').show() :  $('#art').hide();  
});

---

您可以在具体情况下仅使用

.toggle（）

方法：

$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
    $('#art').toggle(); 
});

---

仅使用CSS即可实现同样的效果：

<div>
    <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png"></a>
</div>

div
{
 background-image:url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275');
    width:100px;
    height:100px;
    position:relative;
}
div a
{
 position:absolute;
    top:20px;
    left:30px;
    display:none;
}
div:hover a
{
    display:block;
}

div
{
背景图像：url（'https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275');
宽度：100px；
高度：100px；
位置：相对位置；
}
a组
{
位置：绝对位置；
顶部：20px；
左：30px；
显示：无；
}
div:悬停在a上
{
显示：块；
}

---

编辑：如果您需要在同一页面上多次使用不同的链接URL，我制作了一个版本，该版本需要使用少量jQuery来应用剩余的HTML：

<div class="play kirkbridge" data-playUrl="/myPlayUrl"></div>

这可能有点过分，这取决于你的使用情况

$(document).ready(function() {
    $('#art').hide();             
    $('#imgSmile').mouseenter(function() {
        $('#art').show();
    });
$('#art').mouseenter(function() {
        $('#art').show();
    });
    $('#imgSmile').mouseleave(function() {   
        $('#art').hide();
    });
});​

---

只需添加

#art

鼠标输入事件

以下是另一种方法：

---

我会使用一个包装DIV，因为当按钮与微笑图像重叠时，你的鼠标在上面，你会失去微笑图像的焦点，它开始闪烁。这将避免这种情况。

也可以使用CSS来完成，如果可能的话

这是小提琴

你为什么不直接用CSS做悬停效果呢

HTML

---

​

我在FF12中没有闪烁-你在使用什么浏览器？我在使用Chrome，但它必须在所有浏览器中都能工作，特别是IE。上面的CSS示例在IE9中也能工作。我刚刚在Chrome 18.0.1025.168 m中测试过，它在那里也不会闪烁？+1个不错的解决方案。虽然它在@jamcoupe中不起作用，但你是对的IE7很好，我错了。但它在IE6中肯定不起作用。@Rorymcrossan它在诺基亚3210上也不起作用。如果用户正在使用这两种技术中的任何一种，他们都不应该期望事情能够正常工作。@Curt LOL我知道：D只是确保人们在决定如何做某事时掌握所有事实。IE6仍然拥有约7%的份额，这意味着你还不能完全忽视它。不幸的是。@Rorymcrossan是的，这是真的！

<div>
    <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png"></a>
</div>

div
{
 background-image:url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275');
    width:100px;
    height:100px;
    position:relative;
}
div a
{
 position:absolute;
    top:20px;
    left:30px;
    display:none;
}
div:hover a
{
    display:block;
}

<div class="play kirkbridge" data-playUrl="/myPlayUrl"></div>

$(document).ready(function() {
    $('#art').hide();             
    $('#imgSmile').mouseenter(function() {
        $('#art').show();
    });
$('#art').mouseenter(function() {
        $('#art').show();
    });
    $('#imgSmile').mouseleave(function() {   
        $('#art').hide();
    });
});​

$(document).ready(function(){

    var art = $('#art');
    art.hide();
    var updatePlayButton = function() {
        if (art.is(':visible')) {
            art.hide();
        } else {
            art.show();
        }
    }

    $('#cont').hover(updatePlayButton);

});​

<div id="imgSmile">
     <div id="art">
        <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png">
        </a>
     </div>
    </div>

 #imgSmile
{
    background: url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275') no-repeat center Transparent;
    width: 100px;
    height: 100px;
}
#imgSmile > #art
{
    position: absolute; left: 20px; top: 40px; opacity: 0;
}
#imgSmile:hover > #art
{
    position: absolute; left: 20px; top: 40px; opacity: 1;
}

<div id="wrapper">
  <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile" />

  <div id="art" style="position: absolute; left: 20px; top: 40px;">
     <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png" /></a>
  </div>
  </div>

#art{
    display:none;
}
#wrapper{
    width:100px;
    height:100px;        
}
#wrapper:hover #art{
    display:block;        
}