主要是,我在我的网站上使用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
});
1条答案
按热度按时间xfb7svmp1#
使用悬停并添加属性“display:none”,这比您正在使用的方法要简单得多:
另一件事是你应该在这里使用ID在我个人看来更好。因此,代替(“.item”),你可以使用(“#ItemID”),例如为你拥有的每个不同的项目设置一个特定的操作。