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

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

您可以将事件绑定到.slide 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

Answer 2

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

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

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

会是更好的选择

这里的“,this”将允许您仅选择“carousel-caption”当前聚焦的轮播

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

如果您的#mycarousel 是最父级，则在其中引入另一个 div 并使用类名而不是 id 为其编写鼠标事件