div懸停顯示按鈕/鏈接效果

這裏的效果：當我將鼠標移動到div時，會顯示刪除鏈接。當我移出鼠標時，刪除鏈接消失。div懸停顯示按鈕/鏈接效果

在螢火蟲，我可以看到刪除鏈接的樣式改變時，我徘徊div。但有人可以告訴我如何控制這個？

enter image description here

2011-05-03 sbs

，正如你在圖片看，它可能使用jQuery，一個JavaScript庫來完成。

的代碼很簡單：

HTML：

<div> 
    Foo 
    <span class="delete">Delete</span> 
</div>

的JavaScript：

$('div').hover(function() { 
    $(this).find('.delete').show(); 
}, function() { 
    $(this).find('.delete').hide(); 
});

CSS：

.delete { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    color: red; 

    display: none; 
} 

div { 
    padding: 50px; 
    background-color: rgb(200, 200, 255); 
    position: relative; 
}

演示：http://jsfiddle.net/euChd/3/

來源

2011-05-03 15:08:21 Blender

取決於你是如何進步（支持IE> 6），你可以通過創建一個具有hover僞類的父的選擇做在CSS。從截圖使用相同的標記：

a.deleteFiddle { 
    display: none; 
} 

div.lfiCont:hover a.deleteFiddle { 
    display: inline; 
}

看到它在行動 - http://jsfiddle.net/7msZA/

如果你想要的效果或具有跨瀏覽器的關注則JavaScript是一種選擇。但是，現在CSS完全可以處理這種UX。

來源

2011-05-03 15:04:35

尼斯CSS的解決方案！ – Blender 2011-05-03 15:09:05

這很可能是通過Javascript或jquery完成的。

的如何做到這一點可能是這樣一個例子：

document.getElementById('div1').onmouseover = function() { 
    document.getElementById('div1').style.display = "inline"; 
}

來源

2011-05-03 15:05:43 Joe

您可以用JavaScript做到這一點，我會建議JQuery。 This JQuery page有一個基於懸停來更改樣式的示例。

從該網頁的代碼示例：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    ul { margin-left:20px; color:blue; } 
    li { cursor:default; } 
    span { color:red; } 
</style> 
    <script src="http://code.jquery.com/jquery-git.js"></script> 
</head> 
<body> 
    <ul> 
    <li>Milk</li> 
    <li>Bread</li> 
    <li class='fade'>Chips</li> 

    <li class='fade'>Socks</li> 
    </ul> 
<script> 
$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
); 



//li with fade class 
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);}); 

</script> 

</body> 
</html>

來源

2011-05-03 15:07:56 Casey

div懸停顯示按鈕/鏈接效果

回答

相關問題