Jaki jest najlepszy sposób wyświetlania ikony / przycisku tylko po najechaniu na obiekt? - javascript, jquery, html, css

Mam taki obraz okładki

Gdy użytkownik najedzie myszką na mój obraz, chcę:

• pokaż ikonę aparatu w lewym górnym rogu, oraz
• ukryj go z powrotem, gdy mysz się odsunie.

  ---

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

Nie mogłem sprawić, żeby zachowywał się tak, jak się spodziewałem. Jaki jest najlepszy sposób na wdrożenie czegoś takiego?

JSFiddle

Odpowiedzi:

5 dla odpowiedzi № 1

Nie ma powodu, aby używać JavaScript, jeśli jest to rzeczywisty kod HTML, możesz użyć następnego selektora rodzeństwa za pomocą hover.

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

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

---

1 dla odpowiedzi nr 2

The hover akceptuje dwie funkcje:

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

Skrzypce

Ale oczywiście rozwiązanie CSS jest lepiej.

---

1 dla odpowiedzi nr 3

Jesteś prawie na miejscu. Dodaj drugą anonimową funkcję, dla której chcesz dodać klasę mouseleave

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

Według wahać się(), możesz przejść handlerIn/handlerOut które są synonimami mouseenter/mouseleave

PRÓBNY

---

1 dla odpowiedzi nr 4

Jeśli nie chcesz używać javascript, zawiń div wokół obrazu.

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

Następnie w css idziesz coś takiego

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

Nie przejmuj się javascript, to 2015

---

1 dla odpowiedzi nr 5

powiązanie zdarzenia mouseout w celu usunięcia dodaj hidden znowu klasa

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

Podaj pozycję absolute aby umieścić go na obrazie

Skrzypce

Przejdź do rozwiązania @epascarello. To jest najlepsze.

---

1 dla odpowiedzi № 6

Można to osiągnąć bez JS. Za pomocą sąsiedniego selektora możesz wyświetlić ikonę kiedy #cover-img unosi się na.

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

Zaktualizowano skrzypce

---