悬停时jQuery图像闪烁

Posted 2023-03-13

【中文标题】悬停时jQuery图像闪烁

【英文标题】：jQuery Image Flicker on Hover

【发布时间】：2014-01-07 06:20:04

【问题描述】：

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

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

这是我的代码（我使用 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;

【问题讨论】：

我忘记添加了！就这么做了。

请同时发布相关的html。

可能也需要看一些html

【参考方案1】：

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

更新：

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

【讨论】：

我也尝试过 mouseenter/mouseleave。出现同样的问题。

iframe 是否提供闪存？ ***.com/questions/5281002/z-index-and-iframes flash 出现在其他内容之上，除非它使用 wmode="transparent" ***.com/questions/886864/…

无闪光灯。 Vine 在浏览器中使用 HTML5。

【参考方案2】：

图像周围有跨度标签吗？ 如果是，我可以想象您将鼠标悬停在跨度上，然后图像消失并且跨度变小（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，反之亦然。

【讨论】：

没问题，伙计，玩得开心：D

确实如此。这将是更糟糕和更简洁的代码。

【参考方案3】：

当它消失时，图像将注册 mouseout 事件，这将使图像再次出现。

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

【讨论】：

这一直有效，直到我鼠标离开，此时图片完全消失。

我拼错了visible。这可能就是问题所在。

同样的问题：/ 非常感谢您的帮助。

【参考方案4】：

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

$(function()  // DOM ready shorthand

   $('.picture').hover(function () 
       $(this).fadeToggle(); // make video underneath visible
   );

   // other DOM ready stuff here

);

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

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

【讨论】：

这是我用过的唯一一个 'span' 实例。这是一个很小的 ​​html 文件。

@JonathanOsborn 添加了一个例子

【参考方案5】：

我建议进行一些重组，以及使用hover 而不是mouseover 和mouseout。您看到闪烁的原因是因为 mouseout 会在图像消失后触发，而 hover 只会在鼠标移入和鼠标移出时触发一次。

例子：

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

Fiddle

【讨论】：

HTML 元素定位错误（意味着使用了不需要的z-index）$(this) 的错误使用，以及hover() 的冗长使用to toggle child 方法。

HTML 是对 OP 的修改，CSS 是从 OP 复制/粘贴的，$(this) 是有效的，并且详细使用悬停和显示/隐藏在哪里模仿代码OP。我试图向 OP 展示他如何修改他的代码以一种可以理解的方式工作，而不是完全改变它。

比你不明白 jQuery 中 this 引用的确切用法。

Than 您应该解释为什么它是错误的，而不是对有效答案投反对票并留下无用的尖酸评论？

你还没有解释为什么使用$(this) 是错误的而不是this。