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悬停显示按钮/链接效果

回答

相关问题