图像叠加出现闪烁问题？

Question

图像叠加出现闪烁问题？

javascriptjquery

3

事实上，所有这些解决方案都有效，但与该项目不兼容，因此我将稍微改变问题的表述方式。

本质上，我有一张图片，当有人将鼠标光标移动到它上面时，它会显示一个包含图像（即播放按钮）的div。当他们将光标移出图片时，播放按钮消失。

它可以工作，但是如果您将光标移动到播放按钮上，它会疯狂闪烁，因此我必须以某种方式混淆我的事件。

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

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();
    });
});

Here's a fiddle

- Chris

7个回答

3

问题在于将鼠标移到新图像上会导致原始图像的鼠标移出。尝试使用hover()，同时将两个元素作为选择器。

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

更新后的代码示例

- Rory McCrossan

我在FF12中没有闪烁 - 你用的是什么浏览器？ - Rory McCrossan

我正在使用Chrome，但它必须在所有浏览器中都能正常工作，特别是IE。上面的CSS示例确实可以在IE9中正常工作。 - Chris

我刚在Chrome 18.0.1025.168 m中进行了测试，也没有闪烁吗？ - Rory McCrossan

1

您可以使用.on()方法，
然后将两个元素设置为选择器，并使用事件(e)检查器，例如：

演示 jsBin

$(document).ready(function(){

    $('#art').hide();


    $('#imgSmile, #art').on('mouseenter mouseleave',function(e){
        if(e.type === 'mouseenter'){
            $('#art').show();
        }else{
            $('#art').hide();   
        }
    });

});

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

$('#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(); 
});

使用 .toggle() 进行演示

- Roko C. Buljan

1

这里有一个替代方案：

http://jsfiddle.net/aramk/ZqVZ6/1/

$(document).ready(function(){

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

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

});

我会使用一个包装 DIV，因为当按钮重叠在笑脸图片上并且鼠标悬停在按钮上时，你会失去对笑脸图片的焦点，从而导致它开始闪烁。这样可以避免这种情况发生。

- Aram Kocharyan

1

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

这里是JSFiddle链接http://jsfiddle.net/xasy4/

<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;
}

- Bilal Murtaza

1

http://jsfiddle.net/jqkBx/1/

为什么不直接使用CSS来实现悬停效果呢？

HTML

<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>

CSS

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

- jamcoupe

0

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

只需添加#art鼠标进入事件

- Parv Sharma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Curtis · Accepted Answer

同样的效果可以只使用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 不同，则可以使用另一个版本，该版本仅需要最少的 HTML 并使用 jQuery 应用其余部分：

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

这可能有点过头了，取决于您的使用方式。

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