Javascript 在图像悬停时显示旋转木马标题

我使用的是Bootstrap4Carousel，我试图添加一种效果，其中carousel标题仅显示在悬停状态。问题是，当我将鼠标悬停在图像上时，根本没有显示任何内容

控制台中没有错误，因此我不确定遗漏了什么。有一件事，我认为可能是问题是旋转木马自动滑动，但当我删除了功能，我得到了相同的结果，没有显示在悬停

旋转木马：

<div id="NewsCarousel" class="carousel slide default-div-top-padding" data-ride="carousel">

                    <!-- Indicators -->
                    <ul class="carousel-indicators">
                        <li data-target="#NewsCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#NewsCarousel" data-slide-to="1"></li>
                        <li data-target="#NewsCarousel" data-slide-to="2"></li>
                    </ul>

                    <!-- The slideshow -->
                    <div class="carousel-inner">

                        <div class="carousel-item active">
                            <img src="~/images/Resources/HomePage/knowledgeLatestNews.jpg" alt="imgAlt" style="width:650px;height:350px">
                            <div class="carousel-caption">
                                <a href="#"><h3>Los Angeles</h3></a>
                                <p>We had such a great time in LA!</p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img src="~/images/Resources/HomePage/knowledgeLatestNews.jpg" alt="imgAlt" style="width:650px;height:350px">
                            <div class="carousel-caption">
                                <a href="#"><h3>Los rtr</h3></a>
                                <p>We had such a great time in LA!</p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img src="~/images/Resources/HomePage/knowledgeLatestNews.jpg" alt="imgAlt" style="width:650px;height:350px">
                            <div class="carousel-caption">
                                <a href="#"><h3>Los Angeasdales</h3></a>
                                <p>We had such a great time in LA!</p>
                            </div>
                        </div>

                    </div>

                    <!-- Left and right controls -->
                    <a class="carousel-control-prev" href="#NewsCarousel" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#NewsCarousel" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>

 </div>

Javascript:

<script type="text/javascript">

    $(document).ready(function () {

        $('.carousel-caption').hide();
        $('img[alt = imgAlt').on('hover', function () {
            $('.carousel-caption').fadeIn();
        });
    });

</script>

我不太确定我的java脚本遗漏了什么。此外，如果有更好/更干净的方法纯粹用css实现，任何想法都会被高度接受

---

提前谢谢

对于纯css替代方案，当您将鼠标悬停在.carousel内部时，您可以使标题淡入淡出，如下所示：

---

对于纯css替代方案，当您将鼠标悬停在.carousel内部时，您可以使标题淡入淡出，如下所示：

---

您可以使用mouseenter和mouseout执行相同的操作

$(document).ready(function () {

    $('.carousel-caption').hide();
    $('img[alt = imgAlt]').mouseenter(function () {
        $('.carousel-caption').show();
    }).mouseout(function(){
        $('.carousel-caption').hide();
    });
});

---

您可以使用mouseenter和mouseout执行相同的操作

$(document).ready(function () {

    $('.carousel-caption').hide();
    $('img[alt = imgAlt]').mouseenter(function () {
        $('.carousel-caption').show();
    }).mouseout(function(){
        $('.carousel-caption').hide();
    });
});

---

可能是用于访问图像的选择器没有返回任何内容，因为选择器语法不正确。看

您可以通过在控制台中打印出来轻松找到它：

console.log($('img[alt = imgAlt'));

尝试以下列方式访问图像：

$('img[alt="imgAlt"').on('hover', function () {
    $('.carousel-caption').fadeIn();
});

---

可能是用于访问图像的选择器没有返回任何内容，因为选择器语法不正确。看

您可以通过在控制台中打印出来轻松找到它：

console.log($('img[alt = imgAlt'));

尝试以下列方式访问图像：

$('img[alt="imgAlt"').on('hover', function () {
    $('.carousel-caption').fadeIn();
});

---

请跟我来。我希望你能找到解决办法。并遵循引导4旋转木马页面

.旋转木马标题{ 不透明度：0； -webkit转换：所有0.4s； 过渡：全部为0.4s； 颜色：fff； } .旋转木马项目：悬停。旋转木马标题{ 不透明度：1； } 滑块标题1 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

滑块标题1 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

滑块标题1 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

---

请跟我来。我希望你能找到解决办法。并遵循引导4旋转木马页面

.旋转木马标题{ 不透明度：0； -webkit转换：所有0.4s； 过渡：全部为0.4s； 颜色：fff； } .旋转木马项目：悬停。旋转木马标题{ 不透明度：1； } 滑块标题1 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

滑块标题1 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

滑块标题1 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本