enter image description here

封面圖像。當我的形象在用戶將鼠標懸停，我想：

顯示在左上角的攝像頭圖標，
當鼠標移開時隱藏它。

我已經試過

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>

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

我無法讓它達到我期望看到的效果。實現類似這樣的最佳方式是什麼？

JSFiddle

來源

2015-06-16 Tiffany Soun

感謝你們這麼多幫助我對這個職位。你們真棒。 –

沒有理由使用JavaScript，如果這是實際的HTML代碼，您可以使用懸停的下一個兄弟選擇器。

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

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

來源

2015-06-16 12:38:29 epascarello

啊，是的，+這比我的解決方案好。 –

哦，不錯。看我可以在CSS中實現這一點。聰明。 :) –

@epascarello，我打算投票，但我在http://jsfiddle.net/pdj5xuj6/8/嘗試它，並且它不工作。我錯過了一些愚蠢的東西嗎？ – AmmarCSE

綁定mouseout事件刪除添加hidden類再次

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

給位置absolute將其放置在圖像

Fiddle

轉到了@epascarello解決方案。這是最好的。

來源

2015-06-16 12:36:56

你能教我如何把它放在我的形象上面，並留在左上角嗎？ –

看到這個http://jsfiddle.net/pdj5xuj6/5/ –

你有沒有對我的原始代碼做任何調整，使其工作？我只是好奇我做錯了什麼？ –

的hover接受兩個功能：

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

Fiddle

但顯然the CSS solution更好。

來源

2015-06-16 12:38:25 putvande

不知道。謝謝你教我。我相信像我這樣的其他人也會從中學習。 –

你幾乎在那裏。添加第二個匿名函數添加類mouseleave

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

據hover()，您可以在handlerIn/handlerOut這與mouseenter/mouseleave

DEMO

來源

2015-06-16 12:39:08 AmmarCSE

代名詞傳遞如果你不想使用JavaScript ，在圖像周圍包裹一個div。

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

然後在CSS，你去像這樣

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

不要用JavaScript打擾，這是2015年

來源

2015-06-16 12:39:37

這可以在沒有任何JS來實現。使用相鄰選擇器時，您可以在#cover-img懸停時顯示圖標。

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

Updated Fiddle

來源

2015-06-16 12:42:14 Guy

僅當懸停在對象上時才顯示圖標/按鈕的最佳方式是什麼？

我已經試過

回答

僅當懸停在對象上時才顯示圖標/按鈕的最佳方式是什麼？

我已經試過

回答

相關問題