如何在鼠標懸停時顯示標題並將圖像隱藏在同一div，jquery和Bootstrap中

Question

主要是我在網站上使用Bootstrap
我想將鼠標懸停在代表文章的圖像上，並顯示文章標題，然后圖像將隱藏。
鼠標離開時將隱藏標題並顯示圖像
有人可以幫忙嗎？

提前致謝！！

HTML

<div class="carousel" data-ride="carousel" >
<div class="carousel-inner" role="listbox">
    <div class="item active" >
        <?php displayData('sumbola','1','image'); ?>    
        <div class="carousel-caption hide">
            <h3 ><?php  displayData('sumbola','1','title'); ?></h3>
            <a href="labels.php?id=1">Διαβάστε<br>περισσότερα.</a>
        </div>
    </div>
</div>

jQuery查詢

//顯示文章標題

$(".item").on('mouseenter',function(){ // if mouse-over the icon then the title will show up 
$(".carousel-caption").removeClass("hide");
$(".imglabel").addClass("hide"); // and the image will hide
});

$(".item").on('mouseleave',function(){
$(".carousel-caption").addClass("hide"); //if the mouse leave, then the image will appear again
$(".imglabel").removeClass("hide"); //and the title will leave
});

Answer 1

使用鼠標懸停並添加屬性“ display：none”，它比您使用的方法容易得多：

$(".item").hover( function(){
 $(".carousel-caption").attr("display","block");
 $(".imglabel").attr("display","none");
},function(){
 $(".carousel-caption").attr("display","none");
 $(".imglabel").attr("display","block");
})

另一件事是，我個人認為最好在此使用ID。 因此，您可以使用（“ #ItemID”）代替（“ .item”）為您擁有的每個不同項目設置特定操作。