jQuery图像在悬停时闪烁

jQuery Image Flicker on Hover

本文关键字：闪烁 悬停 图像 jQuery      更新时间：2023-09-26

我在Vine视频的顶部有一张图片。我希望图片在鼠标悬停时消失并在鼠标退出时重新出现。换句话说，只有当鼠标悬停在图片上时，Vine 才可见。

使用当前代码，我让图像闪烁。我认为问题可能出在图片背后的藤蔓上。我试过玩z索引，但没有雪茄。

这是我的代码（我使用 span 来包装 #picture）

  <div class = "vine-two media">
<span><img id = "picture" class = "on-top" src = "img/kanye.jpg"></span>
  <iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>

<script>
 $(document).ready(function() {
    $('span').mouseover(function () {
           $('#picture').hide();
       }).mouseout(function () {
      $('#picture').show();
    });
});
</script>
</div>

.CSS：

.on-top {
position: absolute;
z-index: 1000;
width: 240px;
height: 240px;
}
.adj-size{
width: 240px;
height: 240px;
}

您需要使用 mouseenter 和 mouseleave。 http://api.jquery.com/mouseenter/点击该链接，您可以在示例中看到差异。鼠标悬停会触发多个事件，这可能是闪烁的来源。

更新：

看到代码，我会将 iframe 设置为隐藏，直到它准备好播放。闪存会导致覆盖问题。YouTube解决方案是 http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque 将闪光灯置于wmode=opaque。藤蔓也可能有一些东西。

图像周围有 span-tag 吗？如果是，我可以想象您将鼠标悬停在跨度上，然后图像消失并且跨度变小（0x0 像素），鼠标无法再悬停在跨度上。

也许尝试这样的事情：

<div class="completely_hovering_over_the_video" style="width:video_width;height:video_height" >
   <img id="picture" src="bla.jpg">
</div>

使用此代码，我试图向您展示一个完全覆盖视频并具有固定宽度和固定高度的 DIV。即使 IMG 变小或不可见，此 DIV 也不会改变其尺寸。如果将鼠标悬停在 DIV 上，请隐藏 IMG，反之亦然。

当它消失时，图像将注册鼠标退出事件，这将使图像再次显示。

一种可能的解决方案是尝试$('#picture').css('visibility','hidden');而不是使用hide()，并$('#picture').css('visibility','visible');显示它。我认为这将防止在图像隐藏时触发mouseOut，因为图像仍然存在，只是不可见。

span可以是页面上的任何span，因此这是一种糟糕的做事方式，
您需要更具体地使用选择器：

$(function() { // DOM ready shorthand
   $('.picture').hover(function () {
       $(this).fadeToggle(); // make video underneath visible
   });
   // other DOM ready stuff here
});

或者按照这个实现示例：演示

<div class="video">    
  <!-- video here -->
  <img src="image.jpg">    
</div>


.video{
  position:relative;
  width:400px;
  height:280px;
}
.video img{
  position:absolute;
  top:0;
  left:0;
}


$('.video').hover(function(){
  $(this).find('img').fadeToggle();
});

要解释基本技巧，请将悬停事件指向公共video并img父级，在本例中为 DIV . video 。

这也将起作用：

$('.video').hover(function(){
  $("img", this).fadeToggle();
});

此外，如果您想防止歇斯底里的用户看到动画堆积，您可以添加.stop()方法，例如：

$('.video').hover(function(){
  $("img", this).stop().fadeToggle();
});

同样，使用我提供的 HTML 可以只使用 CSS 完成所有工作：http://jsbin.com/amiBOKu/4/edit

.video:hover > img{
    display:none;
}

我建议进行一些重组，并使用hover而不是mouseover和mouseout。您看到闪烁的原因是mouseout一旦图像褪色就会触发，而悬停只会在鼠标进入时触发一次，在鼠标输出时触发一次。

例：

.HTML：

<div class = "vine-two media">
    <img class = "on-top picture" src = "http://data2.whicdn.com/images/27599232/kanye-west-announces-new-design-company-called-donda-1_large.jpg">
    <iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
</div>

.JS：

$('.media').hover(function() {
    // mouse enter
    $('.picture', this).hide();
}, function() {
    // mouse leave
    $('.picture', this).show();
});

小提琴

相关文章：