調試onMouseOver和onMouseOut與JavaScript和更少的css

Question

我在這裏發現一些問題，發現我的錯誤。調試控制檯說：「找不到變量：mouseover/mouseout。」我不知道她想對我說什麼。我想通過onmouseover/onmouseout事件淡出一個具有較少CSS的div，透明度爲50％。

<div id="right" class="" onMouseOver="javascript: mouseover(this);" onMouseOut="javascript: mouseout(this);"></div> 

<script type="text/javascript"> 
    function mouseover(this) { 
    this.setAttribute("class", "mouseover"); 
    } 

    function mouseout(this) { 
    this.setAttribute("class", ""); 
    } 
</script> 

lessCss代碼：

#right { 
    position:fixed; 
    top:320px; 
    right:0px; 
    z-index:5; 
    height:200px; 
    width:30px; 
    background-image: url(images/right); 
    border-radius:5px; 
    background-color:fade(darken(@bg-color, 50%),50%); 
    cursor:pointer; 
} 
.mouseover { 
    background-color:darken(@bg-color, 50%); 
} 

Answer 1

你不需要一個JavaScript函數，使用CSS選擇器 「懸停」：

#right { 
position:fixed; 
top:320px; 
right:0px; 
z-index:5; 
height:200px; 
width:30px; 
background-image: url(images/right); 
border-radius:5px; 
background-color:fade(darken(@bg-color, 50%),50%); 
cursor:pointer; 
} 
#right:hover { 
background-color:darken(@bg-color, 50%); 
} 

你的div將只需要有 「權利」 爲ID ：

<div id="right"></div>