javascript 如何在同一div、jquery和Bootstrap中显示鼠标悬停时的标题并隐藏图像

vkc1a9a2  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(113)

主要是,我在我的网站上使用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
});
xfb7svmp

xfb7svmp1#

使用悬停并添加属性“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在我个人看来更好。因此,代替(“.item”),你可以使用(“#ItemID”),例如为你拥有的每个不同的项目设置一个特定的操作。

相关问题