在图像悬停时显示轮播字幕

Question

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.

Answer 1

For 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;
}

Answer 2

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

Answer 3

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

Answer 4

Please follow this. I hope you will get your solution. And also follow Bootstrap 4 Carousel page. https://getbootstrap.com/docs/4.1/components/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.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/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.com/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.com/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.com/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>