Question

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

使用当前代码，我的图像会闪烁。我认为问题可能出在图片背后的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;
}

Answer 1

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

更新：

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

Answer 2

span可以在您的网页上任何 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;
}

Answer 3

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

一种可能的解决方案是尝试$('#picture').css('visibility','hidden');而不是hide()和$('#picture').css('visibility','visible');来展示它。我认为这会阻止mouseOut在隐藏图像时触发，因为图像仍在那里，只是看不见。

Answer 4

我建议进行一些重组，以及使用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();
});

Fiddle

Answer 5

图片周围是否有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，反之亦然。

悬停时jQuery图像闪烁

5 个答案: