如何將按鈕懸停在圖像上方或按下它？

我想創建一個馬賽克，這是非常簡單的：如何將按鈕懸停在圖像上方或按下它？

enter image description here

我在表演想着delete按鈕，當用戶hover在圖像上。但是我的網站也很敏感，所以只能懸停才行，我需要在用戶點擊圖片時顯示按鈕。

我發現this code哪個做懸停部分，（我對CSS很抱歉，很抱歉）我該如何以簡單的方式做到這一點？

更新對不起，誤解的傢伙。我認爲智能手機沒有hover的功能，所以當用戶點擊圖片時，會出現一個按鈕來刪除圖片，然後如果按下它，圖片將被刪除，這就是我的意思。

來源

2013-05-16 Valter Silva

這不是真的明確你的意思。單獨使用CSS懸停時，很容易在圖像上出現「按鈕」。但按鈕是什麼？你是什麼意思「克服形象」？ –

對不起，誤會。我認爲智能手機沒有「懸停」功能，因此用戶在點擊圖像時會顯示一個按鈕來移除圖像，如果按下它，圖像將被刪除，這就是我的意思。 –

除了移動的問題，具有懸停動作按鈕的問題是，你不知道，你可以採取行動，直到你徘徊，用戶可能無法永遠徘徊。所以我建議有一個「按鈕」永久可見，說在圖像的底部，有一個半透明的背景或者如果這是不服從，然後將圖像直屬。 –

它可以在一個更簡單，更兼容的方式來完成，無需使用javascript：

HTML：

<div class="show-image"> 
    <img src="http://i.imgur.com/egeVq.png" /> 
    <input class="the-buttons" type="button" value=" Click " /> 
</div>

CSS：

div.show-image 
    { 
    position: relative; 
    float:left; 
    margin:5px; 
    } 

div.show-image:hover input 
    { 
    display: block; 
    } 

div.show-image input 
    { 
    position:absolute; 
    top:0; 
    left:0; 
    display:none; 
    }

小提琴：http://jsfiddle.net/jvX9u/211/

來源

2013-05-16 11:53:16

我真的不明白'點擊image'位以上，如果你解釋它更好，我可以更新我的代碼。 –

不好意思誤解弗蘭克。我認爲智能手機沒有「懸停」功能，因此用戶在點擊圖像時會顯示一個按鈕來移除圖像，如果按下它，圖像將被刪除，這就是我的意思。 –

謝謝弗蘭克，它適用於我所需要的！ –

在這種情況下，我不會去按鈕。我看到它的方式，它看起來好多了，如果你用一個簡單的錨是這樣的：

enter image description here

它可以在一些角落懸停或mouseIn出現，你可以用CSS做通過使用不透明度轉換。（mouseIn時從0到1）。

來源

2013-05-16 11:38:38 SAiNT

你能告訴我怎麼做，請嗎？我喜歡你的建議。 –

該代碼使用庫jquery。

對於點擊事件，您可以使用jquery的.click方法。

我更新了同一個例子的代碼。看看它：http://jsfiddle.net/jvX9u/209/

我已經評論了懸停動作的一部分，並添加了鼠標移出按鈕時的點擊部分和鼠標懸停的另一部分。

這是代碼：

jQuery(function() {  
    jQuery(".the-buttons").hide(); 
    /*jQuery('.show-image').hover(function() { 
     jQuery(this).find('.the-buttons').fadeIn(1500); 
    }, function() { 
     jQuery(this).find('.the-buttons').fadeOut(1500); 
    });*/ 

    jQuery('.show-image').click(function() { 
     jQuery(this).find('.the-buttons').fadeIn(1500); 
    }, function() { 
     jQuery(this).find('.the-buttons').fadeOut(1500); 
    }); 

    jQuery('.show-image').mouseout(function() { 
     jQuery(this).find('.the-buttons').fadeOut(1500); 
    }); 
});

希望幫助！

來源

2013-05-16 11:42:32

如何將按鈕懸停在圖像上方或按下它？

回答

相關問題