Question

我在图片上有一个覆盖文字和导航箭头，它们在鼠标悬停事件被触发时出现，并在鼠标离开图像时隐藏。

错误是叠加文本不是图像的一部分，因此当我将鼠标悬停在图像上时，它会开始闪烁（因为当文本隐藏时，鼠标会定位在图像上，并触发鼠标悬停事件，文字再次显示）

这是我目前的JavaScript逻辑：

$('#container img').mouseover(function(){
    $(this).siblings('.discr').show();
    $(this).mouseout(function(){
        $(this).siblings('.discr').hide();
    })
})

为了更好地理解这是一个DEMO，这就是我所期望的：当鼠标悬停在叠加文本上时，叠加文本不会闪烁，就像鼠标只在图像上时一样。

Answer 1

您可以尝试这样的事情：

JavaScript版

$('#container').mouseover(function () {
    var $controls = $(this).find('.discr');
    $controls.show();
    $(this).mouseout(function () {
        $controls.hide();
    })
})

示例http://jsfiddle.net/b6hjm3t1/

没有JavaScript的纯CSS版

只需添加CSS，就可以在没有使用JavaScript的情况下使用CSS获得相同的结果：

#container:hover .discr {
  display:block;
}

示例：http://jsfiddle.net/t6hf0fqg/

Answer 2

我认为这可以满足您的需求。我已经修改了一点代码：

http://jsfiddle.net/jfkk78cn/1/

$( "#container" )
  .mouseover(function() {
    $(this).find('.discr').show();
  })
  .mouseout(function() {
    $(this).find('.discr').hide();
  });

Answer 3

以下是仅针对CSS的解决方案，效果相同。

重要的一部分是#container:hover .discr，.discr会在#container悬停时定位img { width:200px; height:200px; display:block; } #container { float:left; position:relative; border:2px solid green; } .discr { position:absolute; color:red; background:rgba(0, 0, 0, 0.2); bottom:0px; width:100%; text-align:center; display:none; } /*ADDED THIS RULE*/ #container:hover .discr{ display:block; } .next { left:185px; } .next, .prev { bottom:50%; width:15px; border-radius:9px; }元素。

<div id='container'>
    <img src='http://goo.gl/Rwf5SG' />
    
    <div class='discr prev'>&lt;</div>
    <div class='discr next'>&gt;</div>
    <div class='discr'>lorem ipsum</div>
</div>

{{1}}

将覆盖文本悬停在图像错误上

3 个答案: