我正在使用Bootstrap 4轮播,我正在尝试添加一个效果,其中旋转木马 Headers 仅在悬停时显示 . 问题是当我将鼠标悬停在图像上时根本没有显示任何内容 .
控制台没有错误,所以我不确定我错过了什么 . 我认为可能是问题的一件事是旋转木马自动滑动但是当我删除该功能时我得到了相同的结果,没有任何东西出现在悬停上 .
转盘:
<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中做任何想法将被高度接受 .
提前致谢 .
4 回答
您可以使用mouseenter和mouseout执行相同的操作 .
可能由于选择器语法不正确,用于访问图像的选择器不返回任何内容 . 见Attribute Selectors - jQuery
您可以通过在控制台中打印出来轻松找到它:
尝试按以下方式访问图像:
对于一个纯粹的css替代方案,当你将鼠标悬停在
.carousel-inner
上时,你可以将 Headers 淡入淡出:请关注此 . 我希望你能得到你的解决方案 . 并按照Bootstrap 4 Carousel页面进行操作 . https://getbootstrap.com/docs/4.1/components/carousel/