仅在悬停在物体上时显示图标/按钮的最佳方法是什么？

Question

I have a cover-image like this

When the user hover on my image, I want to :

• show an camera icon on the top left, and
• hide it back when the mouse move away.

  ---

I have tried

CSS

<style type="text/css">

    #cover-img:hover{
        opacity: .9;
    }

    #nav-upload-icon{
        top: 10px;
        left: 10px;
        color: red;
        z-index: 1000;
    }

</style>

HTML

<img id="cover-img" src="/material/img/profile-menu.png" height="130px">
<i id="nav-upload-icon" class="md md-camera hidden"></i>

JS

$("#cover-img").hover(function() {
   $("#nav-upload-icon").removeClass( "hidden" );
});

I couldn't get it to behave what I expected to see. What is the best way to implement something like that ?

JSFiddle

Answer 1

There is no reason to use JavaScript if that is the actual html code, you can use the next sibling selector with hover.

#cover-img:hover + #nav-upload-icon,  
#nav-upload-icon:hover {
    visibility: visible;
}

#nav-upload-icon { 
    visibility : hidden; 
}

Answer 2

bind mouseout event to remove add the hidden class again

$("#cover-img").hover(function() {
    $("#nav-upload-icon").removeClass("hidden");
});
$("#cover-img").mouseout(function() {
    $("#nav-upload-icon").addClass("hidden");
});

Give position absolute to place it over the image

Fiddle

Go for @epascarello solution. It is the best.

Answer 3

The hover accepts two functions:

$("#cover-img").hover(function() {
    $("#nav-upload-icon").removeClass("hidden");
}, function() {
    $("#nav-upload-icon").addClass("hidden");
});

Fiddle

But obviously the CSS solution is better.

Answer 4

Your almost there. Add a second anonymous function to add the class for mouseleave

$("#cover-img").hover(function() {
    $("#nav-upload-icon").removeClass("hidden");
}, function() {
    $("#nav-upload-icon").addClass("hidden");
});

According to hover() , you can pass in handlerIn/handlerOut which are synonymous with mouseenter/mouseleave

DEMO

Answer 5

If you don't want to use javascript, wrap a div around the image.

<div class="image-wrap">
   <img > <-- your super cool large image
   <img class="upload"> <- your super cool icon and stuff absolutely positioned with 0 transparency
</div>

Then in the css you go something like this

div.image-wrap:hover img.upload {
    opacity:0.9
}

Don't bother with javascript, it's 2015

Answer 6

This can be achieved without any JS. Using the adjacent selector you can show the icon when #cover-img is hovered on.

#cover-img:hover + img {
  opacity: 1;
}

Updated Fiddle