问题描述
我使用 Bootstrap 3
和 jQuery 1.9.1
创建一个网站,其中显示个人资料图片a < li>
标记。当我在图片上方悬停时,我想显示更新图片的链接。到目前为止,我设法褪色的图像悬停,但我无法显示链接或文本悬停在图像上。这是我的代码,
I'm using Bootstrap 3
and jQuery 1.9.1
to make a website where profile picture is shown in a <li>
tag. I want to show the link of "Update Image" when I'm hovering over the image. So far I've managed to fade the image on hovering but I'm unable to show a link or text on hovering over image. Here are my codes,
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>
我搜索了其他来源,但没有一个工作,因为它会bug我自己的CSS风格。如何在悬停时在图像中间显示链接?需要这个帮助!谢谢。
I've searched other sources but none of them works since it'll bug my own css styles. How can I show a link at the middle of the image on hovering? Need this help badly! Thanks.
推荐答案
希望,如果你想做没有Jquery - 即使如果你想使用jquery管理它,也可以做。不是大问题
Hope, if you want to do it without Jquery - even though if you want to manage it using jquery, it can also be done.. not a big issue
.img-profile {
margin-top: 10px;
width: 200px;
/* if image is bigger it will adjust according to parent width */
height: 250px;
display: inline-block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-profile {
opacity: 0.5;
}
.img-wrap .hover-div {
display: none;
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
margin-top: -10px;
z-index: 10;
/* width of image container */
}
.img-wrap:hover .hover-div {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="img-wrap">
<img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" />
<div class="hover-div"><a href="#">Update Image</a>
</div>
</li>
</ul>
</div>
</div>
这篇关于在jQuery中悬停时显示图像上的链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!