Question

对于糟糕的头衔感到抱歉，不要知道如何在那个短片中解释它。

我有一个img，当我将它悬停时，会显示一个带有一些文字的div 那个div出现在你被徘徊的img中，当你盘旋那个div时...... 你exualy离开img所以div与文本消失。

那么我的问题是，我怎么能让它仍然显示为块？

我已经尝试了一些东西;

jQuery部分;

$("img#hover-for-text").on("mouseover", function(){
    $(this).next().stop().fadeIn();
});
$("#text-hold").on("mouseover", function(){
    $(this).next().stop().fadeIn();
});

$("img#hover-for-text").on("mouseleave", function(){
    $(this).next().stop().fadeOut();
});

HTML部分;

<div class="panel-body">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <img src="images/projects/<?=$data['picture']?>" class="img-responsive" id="hover-for-text">
    <div class="carousel-caption">
      <a style="color:black;"><?=$data['content']?></a>
    </div>
  </div>
</div>

CSS部分;

.carousel-caption {
  display: none;
}

Answer 1

不要将鼠标放在图像上，而是必须将鼠标放在父组件上

$("#mycarousel").on("mouseover", function(){
    $(".carousel-caption",this).stop().fadeIn();
});

$("#mycarousel").on("mouseleave", function(){
    $(".carousel-caption",this).stop().fadeOut();
});

将是更好的选择

这里的“，这个”将允许您选择“旋转木马 - 字幕”仅限当前聚焦的旋转木马

检查http://jsfiddle.net/ZigmaEmpire/6a18txbu/1/

如果您的#mycarousel是最大的父母，那么在其中引入另一个div并为其编写带有类名而不是id的鼠标事件

Answer 2

您可以将事件绑定到.slide div并使用它的子节点，因此鼠标永远不会离开父div。

像这样：

$(document).ready(function () {
    $(".slide").on("mouseover", function () {
        $(this).find(".carousel-caption").stop().fadeIn();
    });

    $(".slide").on("mouseleave", function () {
        $(this).find(".carousel-caption").stop().fadeOut();
    });

})

Fiddle

显示div并在悬停在图像上时按住它

2 个答案: