Qual é a melhor maneira de mostrar o ícone / botão apenas ao passar o mouse sobre um objeto? - javascript, jquery, html, css

Eu tenho uma imagem de capa como esta

Quando o usuário passa o mouse sobre minha imagem, eu quero:

• mostrar um ícone de câmera no canto superior esquerdo e
• esconda-o de volta quando o mouse se mover.

  ---

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

Eu não conseguia fazer com que ele se comportasse como esperava ver. Qual é a melhor maneira de implementar algo assim?

JSFiddle

Respostas:

5 para resposta № 1

Não há razão para usar JavaScript se esse for o código html real, você pode usar o próximo seletor irmão com o foco.

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

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

---

1 para resposta № 2

o hover aceita duas funções:

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

Violino

Mas obviamente a solução CSS é melhor.

---

1 para resposta № 3

Você está quase lá. Adicione uma segunda função anônima para adicionar a classe para mouseleave

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

De acordo com flutuar(), você pode passar em handlerIn/handlerOut que são sinônimos de mouseenter/mouseleave

DEMO

---

1 para resposta № 4

Se você não quiser usar javascript, envolva uma div ao redor da imagem.

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

Então no css você vai algo assim

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

Não se preocupe com javascript, estamos em 2015

---

1 para resposta № 5

evento bind mouseout para remover adicionar o hidden classe de novo

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

Dar posição absolute para colocá-lo sobre a imagem

Violino

Vá para a solução @epascarello. E o melhor.

---

1 para resposta № 6

Isso pode ser alcançado sem qualquer JS. Usando o seletor adjacente, você pode mostrar o ícone quando #cover-img é pairado sobre.

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

Fiddle atualizado

---