鼠标悬停时在图像中心显示图标字体

Show icon font on image center on mouse hover

本文关键字：显示 显示图 图标 字体 悬停 图像 鼠标      更新时间：2023-09-26

我试图做一个效果，并显示一个搜索图标字体，当鼠标悬停我的"image1.png"。我已经用jQuery完成了这个效果，但现在我不知道如何将这个标志性字体与jQuery集成在一起。有人做过这样的事吗?你能帮个小忙吗?

 <article id="loop-news">
     <span id="testIcon"><I  class = "fa fa-search-plus" >  <!--show just on mouse hover -->
     <img src="image1.png" id="test" />
     <h2>Title </h2>
     <p>My Post</p>
 </article>

我的css首先隐藏图标字体:

#testIcon>i{display:none;}

我的jquery给不透明度效果:

 $("#test").hover(function() {
     $(this).animate({opacity: 0.5}, 500);
 }, function() {
     $(this).animate({opacity: 1.0}, 500);
 });

如果我理解你的问题，我会使用CSS3过渡。在这个例子中，我只是用你的图标字体替换字体族(假设它是这样工作的-从来没有使用过它)。

h2 {
    position: aboslute;
    margin-top: -350px;
    display: none;
    text-align: center;
    font-family: arial;
}
#loop-news:hover h2 {
    display: block;
}
#loop-news:hover img {
    opacity: .5;
}
img, h2 {
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

JS小提琴

相关文章：