图像叠加闪烁

Image overlay is flickering?

本文关键字：闪烁 叠加 图像      更新时间：2023-09-26

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

本质上，我有一个图像，当有人将鼠标光标移到它上面时，它会显示一个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();
    });
});​

这是一个小提琴

同样的效果也可以用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：

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

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

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

问题是将鼠标悬停在新图像上导致鼠标悬停在原始图像上。尝试改用hover()，以及这两个元素作为选择器。

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

更新的小提琴

这是一种替代方法：

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，因为当按钮与微笑图像重叠并且鼠标悬停在上面时，您会失去微笑图像的焦点并开始闪烁。这将避免这种情况。

也可以

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

这是小提琴 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>

CSS

 #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;
}
您可以使用

.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（） 演示

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


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

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

相关文章：