how to show the title on mouse over and hide the image in the same div, jquery and Bootstrap

Question

Mainly, i am using Bootstrap on my website
I want to hover the mouse on image ,that represents an article, and show the title of the article and the image will hide.
on mouse leave will hide the title and appear the image
Please can anyone help?

Thanks in advanced!!

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

//show the title of the article

$(".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

Use hover and add attribute "display:none" which is a lot easier than the method you are using:

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

one other thing is that you should use IDs here preferably in my personal opinion. thus instead of (".item") you can use ("#ItemID") for example to set a specific action for each different item you have.