JS實現(xiàn)css hover操作的方法示例

發(fā)布時間：2020-09-01 14:46:32 來源：腳本之家閱讀：393 作者：謝玉勝欄目：web開發(fā)

本文實例講述了JS實現(xiàn)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>新浪財經(jīng)</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>

運行效果圖如下：

JS實現(xiàn)css hover操作的方法示例

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

向AI問一下細節(jié)

JS實現(xiàn)css hover操作的方法示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽