javascript - Show link on image at hovering in jQuery - Stack Overflow

admin管理员组

文章数量:1277875

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 is my code:

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>

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?

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 is my code:

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>

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?

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 26, 2023 at 23:12 halfer 20.5k1919 gold badges109109 silver badges202202 bronze badges asked Dec 21, 2015 at 7:33 Shihan KhanShihan Khan 2,18844 gold badges3434 silver badges7070 bronze badges 3

• Where do you want to display the link? – void Commented Dec 21, 2015 at 7:39
• you can do it only with css, or you want it to be done with jQuery? – Aminesrine Commented Dec 21, 2015 at 7:40
• Anything works for me. But I suggest jquery since my design is responsive and image position changes depending on device screen size. – Shihan Khan Commented Dec 21, 2015 at 7:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./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>

Yoy should try this. that is exactly you want.

$(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./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.sstatic/TwJmm.gif?s=328&g=1" alt="profile_pic" /><a href="https://www.google." style="display:none">Link that you want</a>
            </li>
        </ul>
    </div>
</div>

you can achieve all that using css alone.

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;
}

check this fiddle

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/wikipedia/mons/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);
            });
});

本文标签： javascriptShow link on image at hovering in jQueryStack Overflow