图像叠加是闪烁的吗？ [英] Image overlay is flickering?

问题描述

事实是所有这些解决方案都有效，只是没有项目，所以我会重新提出问题，略有不同**

The truth is all these solutions work, just not with the project so I will re-pose the question, slightly differently **

基本上我有一个图像，当有人将鼠标移到它上面时，它会显示一个div（包含一个图像 - 也就是播放按钮）。当它们移动时，它们的光标位于图像之外，播放按钮就会消失。

Essentially I have an image, which when someone moves their mouse cursor over it, it displays a div (which contains an image - aka play button). When they move they're cursor outside of the image, the play button disappears.

它有效但是如果你将诅咒移到播放按钮上它会像疯了一样闪烁，因此我必须以某种方式混淆我的活动..

It works but if you move the curse over the play button it flickrs like mad, hence I must have my events mixed up somehow..

提前感谢您的任何帮助......

Thanks in advance for any help...

HTML

<div id="cont">
    <div id="art"  style= "position: absolute; left: 20px; top: 40px;">
        <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png"></a>
    </div>
    <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile"></img>

jQuery

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

    $('#imgSmile').mouseleave(function() {   
        $('#art').hide();
    });
});​

这是一个小提琴

推荐答案

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

This same effect could be achieved using just 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;
}

- 见证 -

编辑：如果您需要在具有不同链接URL的同一页面上多次使用此项，我已经制作了一个版本，需要使用一些jQuery来应用其余的HTML：

In case you need to use this multiple times on the same page with different link URLs, I've made a version which requires minimal HTML using a bit of jQuery to apply the rest:

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

http://jsfiddle.net/tW68d/16/

这可能有点矫枉过正，这取决于你的使用情况。

This might be a bit overkill though, it depends on your usage.

这篇关于图像叠加是闪烁的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！