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

Question

我有这样的封面图片

当用户将鼠标悬停在我的图片上时,我想:

• 在左上角显示一个相机图标,然后
• 当鼠标移开时隐藏它.

  ---

我试过了

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

我无法让它表现出我期望看到的.实现类似的东西的最佳方法是什么？

的jsfiddle

Answer 1

如果这是实际的html代码,没有理由使用JavaScript,你可以使用悬停的下一个兄弟选择器.

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

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