我正在使用Bootstrap 3和jQuery 1.9.1制作一个网站,其中个人资料图片显示在<li>
标签中。我想显示“更新图像”的链接,当我悬停在图像。到目前为止,我已经设法淡化图像悬停,但我无法显示一个链接或文本悬停在图像上。
下面是我的代码:
*JQUERY
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
字符串
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
型
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
型
我已经搜索了其他来源,但没有一个工作,因为它会错误我自己的CSS样式。如何在悬停时在图像中间显示链接?
4条答案
按热度按时间xyhw6mcr1#
希望,如果你想在没有Jquery的情况下完成它-即使你想使用jquery来管理它,也可以完成。不是什么大问题
个字符
vc6uscn92#
你应该试试这个。那正是你想要的
l7mqbcuq3#
你可以单独使用CSS来实现这一切。
html
字符串
css
型
检查此fiddle
mrzz3bfm4#
HTML
字符串
CSS
型
JS
型