本文實例講述了JS實現css hover操作的方法。分享給大家供大家參考，具體如下：
hover我們可以用css的方式寫，當然，也可以用js的方式寫
<html>
<head>
<title>js的下拉菜單效果</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
ul li{
list-style: none;
}
a{
text-decoration: none
}
.header{
height: 45px;
background-color:#FBFBFB;
border-bottom: 1px solid #C7C7C7;
}
.header-center{
width: 1000px;
height: 100%;
margin: 0 auto;
position: relative;
}
.header-mobile{
width: 130px;
position: absolute;
top:0;
right: 0;
text-align: center;
}
/* .header-mobile:hover .header-mobile-list{
display: block;
}*/
.header-mobile a{
display: block;
height: 45px;
line-height: 45px;
color:#000000;
}
.header-mobile-list{
display: none;
background:url(bg.png) no-repeat;
background-position: 20px 18px;
}
.header-mobile-list li{
height: 45px;
border-bottom: 1px dashed gray;
font-family: '微軟雅黑';
line-height: 50px;
padding-left: 35px;
padding-top: 5px;
}
</style>
</head>
<body>
<header class="header">
<div class="header-center">
<div class="header-mobile" id="headerMobile">
<a href="">移動客戶端</a>
<ul class="header-mobile-list" id="mobileList">
<li>新浪微博</li>
<li>新浪新聞</li>
<li>新浪體育</li>
<li>新浪娛樂</li>
<li>新浪財經</li>
<li>天氣通</li>
</ul>
</div>
</div>
</header>
</body>
<script type="text/javascript">
//封裝選擇ID
window.onload=function(){
function $(id){
return document.getElementById(id);
}
//鼠標進
$("headerMobile").onmouseover=function(){
// this.style.display="none";
$("mobileList").style.display="block"
//給當錢的添加樣式
this.style.boxShadow=" 0 2px 2px gray"
}
//鼠標出
$("headerMobile").onmouseout=function(){
$("mobileList").style.display="none"
this.style.boxShadow='none'
}
}
</script>
</html>
運行效果圖如下：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
