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

很抱歉标题不好，我真的不知道怎么用这么短的篇幅来解释

我有一个

img

，当我将它悬停时，它会显示一个带有一些文本的div。
该div出现在您悬停的

img

中，当您悬停该div时…
您可能会离开

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>

---

与其将鼠标放在图像上，不如将鼠标放在父组件上

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

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

将是更好的选择

在这里，“this”将允许您仅选择当前聚焦的旋转木马的“旋转木马标题”

检查

---

如果您的#mycarousel是父级most，则在其内部引入另一个div，并使用类名（而不是id）为其编写鼠标事件，您可以将事件绑定到

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

})

---

你不能把

幻灯片上的事件绑定起来吗

？你怎么看mena@Joelalmeda？像这样：Thankz@Joelalmeda这个有效：）要添加一个答案这个也很有效。但我认为乔尔·阿尔梅达是第一个：s

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

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

})