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

Answer 2

你应该试试这个。 这正是你想要的。

 $(function () { $(".img-profile").hover( function () { $(this).fadeTo(200, 0.45); $(this).closest("li").find("a").show(); }, function () { $(this).fadeTo(200, 1); $(this).closest("li").find("a").hide(); }); }) 

 .img-profile { margin-top: 10px; width: 200px; height: 250px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <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="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" /><a href="https://www.google.com" style="display:none">Link that you want</a> </li> </ul> </div> </div> 

Answer 3

你可以单独使用css实现所有这一切。

HTML

<ul class="nav" id="side-menu">
    <li>
        <img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
        <p class="text">change profile picture</p>
    </li>
</ul>

CSS

.img-profile {
    margin-top: 10px;
    width: 200px;
    height: 250px;
    opacity: 1.0;
    filter:alpha(opacity=100);
}
.text {
    display: none;
}
img-profile:hover {
    opacity: 0.45;
    filter:alpha(opacity=45);
}
img-profile:hover + .text {
    display: block;
}

检查这个小提琴

Answer 4

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="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
                <a href="" id="update">Update Image</a>
            </li>
        </ul>
    </div>
</div>

CSS

.img-profile {
    margin-top: 10px;
    width: 200px;
    height: 250px;
}
#side-menu li a{
  display:none;
}
#side-menu li:hover a#update{
  display:block;
}

JS

$(function () {
        $(".img-profile").hover(
            function () {
                $(this).fadeTo(200, 0.45);
            },
            function () {
                $(this).fadeTo(200, 1);
            });
});