MouseOver Image效果

Question

我是JavaScript和JQuery的新手。

我試着用google搜索，但無法準確描述正確的現象，所以Google給了我結果，我沒有找。

在像Pinterest這樣的網站中，它們如何創建鼠標懸停圖像效果 - 即圖像中的Repin/Like/Comment菜單。

這是相當容易做 - 我只需要在圖像內的一個盒子？

你能指點我走向正確的方向還是真的很簡單爲我解決這個問題？

謝謝。

Answer 1

我爲Pinterest做了大量的挖掘工作，看看他們究竟做了些什麼，這很難，因爲他們縮小了所有的css文件，但實際上這些都是用簡單的CSS3 hover完成的。這裏是我的發現：

這裏是Pinterest的一個典型的銷（特別是一列賓）

<a class="Button Button11 WhiteButton ContrastButton repin_link" data-componenttype="MODAL_REPIN" data-id="176555247863760400" href="/pin/176555247863760400/repin/" wotsearchprocessed="true"> 
    <em></em><span>Repin</span> 
</a> 

下面是列賓的CSS一樣，和註釋按鈕

.actions.likebutton, 
.actions.comment, 
.actions.repin_link, 
.actions.editbutton, 
.actions.unlikebutton { 
    display: none 
}.pin: hover.actions.likebutton, 
.pin: hover.actions.comment, 
.pin: hover.actions.repin_link, 
.pin: hover.actions.editbutton, 
.pin: hover.actions.unlikebutton { 
    display: block 
} 

基本上當一個pin不會被懸停，它們將顯示設置爲none，然後當用戶懸停在它上面時，css將其顯示爲塊。實際上，如果你檢查元素，你可以看到所有的按鈕，但他們只是不顯示在屏幕上，直到你懸停。當然，鏈接到其他網站只需通過a href即可將用戶發送到另一個鏈接。希望這可以幫助。

Answer 2

非常容易實現：

---

HTML

<div class="gallery-item"> 

    <a href="#"> 
     <img alt="" src="image.jpg" /> 
    </a> 

    <div class="gallery-item-like"> <!-- class `gallery-item-like` is `display:none;` by default --> 
     <a href="#" class="button-like"> 
     <img src="icon.png" width="20" height="20" title="iLike" /> 
     </a> 
    </div> 

</div> 

---

JS

$('.gallery-item').hover(
     function(){ 
      $(this).find(".gallery-item-like") 
      .fadeIn("fast"); 
     }, 
     function(){ 
      $(this).find(".gallery-item-like") 
      .fadeOut("fast"); 
    } 
); 

---

CSS

.gallery-item-like { 
    display: none; 
    font-size: 10pt; 
    position: relative; 

    top: 15px; 
    left: 15px; 
} 

Answer 3

Fiddle

<div class="box"> <img src="myimage"> <div class="options"> <div class="button"> Like </div> <div class="button"> Repin </div> </div> </div> 

Answer 4

可以代替圖像的使用按鈕，並將實際IMG標籤上的按鈕內。然後在按鈕內添加像div這樣的其他元素。現在，您可以使用javascript/jquery選擇性地隱藏和顯示鼠標上的div。