I am using Bootstrap 4 carousel and I am trying to add an effect where carousel caption only displays on hover. The problem is that when I hover over the image nothing is being displayed at all.
There are no errors in the console so I'm not sure what did I missed. One thing that I thought that could be the issue was carousel sliding automatically but when I removed the feature I got the same results, nothing showing up on hover.
The 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>
I'm not quite sure what did I missed in my java script. Also if there is a better/cleaner way to do it purely in css any ideas would be highly accepted.
Thanks in advance.
I am using Bootstrap 4 carousel and I am trying to add an effect where carousel caption only displays on hover. The problem is that when I hover over the image nothing is being displayed at all.
There are no errors in the console so I'm not sure what did I missed. One thing that I thought that could be the issue was carousel sliding automatically but when I removed the feature I got the same results, nothing showing up on hover.
The 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>
I'm not quite sure what did I missed in my java script. Also if there is a better/cleaner way to do it purely in css any ideas would be highly accepted.
Thanks in advance.
Share Improve this question edited Dec 9, 2018 at 17:30 HynekS 3,3372 gold badges23 silver badges41 bronze badges asked Dec 9, 2018 at 17:14 someoneInTheWorldsomeoneInTheWorld 591 silver badge8 bronze badges4 Answers
Reset to default 3For a pure css alternative you can just have the caption fade in and out when you hover over the .carousel-inner like so:
.carousel-caption{
opacity:0;
transition:500ms ease-in-out;
}
.carousel-item:hover .carousel-caption{
opacity:1;
}
Please follow this. I hope you will get your solution. And also follow Bootstrap 4 Carousel page. https://getbootstrap./docs/4.1/ponents/carousel/
.carousel-caption {
opacity: 0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
color: #fff;
}
.carousel-item:hover .carousel-caption {
opacity: 1;
}<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder./800x400" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Slider Title 1</h5>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder./800x400" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Slider Title 1</h5>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder./800x400" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Slider Title 1</h5>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>You can use mouseenter and mouseout to do the same.
$(document).ready(function () {
$('.carousel-caption').hide();
$('img[alt = imgAlt]').mouseenter(function () {
$('.carousel-caption').show();
}).mouseout(function(){
$('.carousel-caption').hide();
});
});
Possibly the selector used to access the image returns nothing as the selector syntax is incorrect. See Attribute Selectors - jQuery
You can find it out easily by printing it out in the console:
console.log($('img[alt = imgAlt'));
Try accessing the image in the following way:
$('img[alt="imgAlt"').on('hover', function () {
$('.carousel-caption').fadeIn();
});