html頁面中的div樣式

Question

所有，

如何在下面的代碼中使div更具表現力。 即，在鼠標懸停時，div應該看起來與title屬性相同，甚至更好，並且其上的文本也應該看起來像樣。

 <style type="text/css">
 #div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(window).mouseover(function(event){
    $("#div1").css({'top': event.pageY, 'left': event.pageX});  
});
});
</script>
<div id="div1">move me</div>

謝謝.....

Answer 1

這個怎么樣：

<style type="text/css">
 #div1 {
 font-size: 12px;
 font-family: helvetica;
 background-color: #ffffaa;
 color: black;
 position: absolute;
 border-left: solid 1px #d0d0d0;
 border-top: solid 1px #d0d0d0;
 border-right: solid 1px #a0a0a0;
 border-bottom: solid 1px #a0a0a0;
 padding: 1px;
}
</style>

它看起來有點像標題工具提示（但請注意，每個用戶都可以通過OS或瀏覽器進行不同的配置），並且添加了明亮的3d效果。 如果您使用的是CSS3，則還可以使用漸變，圓角和陰影，看起來不錯。

Answer 2

這個怎么樣：

$(function(){
 $(window).mouseover(function(event){
    $("#div1").css({'color': '#0000ff'});
    $("#div1").css({'font-weight': 'bold'});
    $("#div1").css({'background-color': '#00ff00'});
});
});

Answer 3

我認為您應該從“ mouseover”切換到“ mousemove”，因為這樣的效果會更平滑一些：

$(window).mousemove(function(event){
    $("#div1").css({'top': event.pageY, 'left': event.pageX});  
});

至於外觀，這是Windows工具提示的外觀（如果您要這樣做的話）：

<style type="text/css">
    #div1
    {
        color: #000;
        background: #FDFFC9;
        border: 1px solid #000;
        font: 12px Arial, sans-serif;
        padding: 5px;
        position: absolute;
    }
</style>

這是您可能會喜歡的東西：

<style type="text/css">
    #div1
    {
        color: #FFF;
        background: #5289BF;
        border: 1px solid #369;
        border-width: 0 2px 2px 0;
        font: bold 15px Arial, serif;
        padding: 10px;
        position: absolute;
    }
</style>