在jquery中悬停时显示图像上的链接

Question

我正在使用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样式.如何在悬停时在图像中间显示链接？急需这个帮助!谢谢.

Answer 1

希望,如果你想在没有Jquery的情况下做到这一点 - 即使你想用jquery来管理它,它也可以做到......不是一个大问题

.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>