Ein Beispiel-Tutorial für Hover-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ein Beispiel-Tutorial für Hover

Jul 17, 2017 pm 01:39 PM

hover 实例用法

Beispiel

Wählen Sie das Element aus, auf dem der Mauszeiger schwebt, und legen Sie seinen Stil fest:

a:hover
{
background-color:gelb;
}

//hover, eine andere Möglichkeit, die Maus hinein und heraus zu bewegen

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;&lt;title&gt;左导航特效&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;* {margin: 0px;padding: 0px;font-size: 12px;}#nav .navsBox {width: 160px;}#nav .navsBox .firstNav {height:45px;line-height:45px;background-color:#EBEBEB;border-left:10px solid #FE705C;padding-left:20px;width:130px;font-weight:bold;cursor: pointer;}#nav .navsBox ul {display:none;list-style:none;}#nav .navsBox ul li {display:block;height:45px;line-height:45px;padding-left:70px;width:90px;background-color:#F2F2F2;background-position:33px 7px;background-repeat:no-repeat;}#nav .navsBox ul li.jedh {background-image:url("./images/huan.gif");}#nav .navsBox ul li.jlbbyk {background-image:url("./images/you.gif");}#nav .navsBox ul li.jwljb {background-image:url("./images/gouwu.gif");}#nav .navsBox ul li.mrljb {background-image:url("./images/meiri.gif");}#nav .navsBox ul li.vipjtj {background-image:url("./images/zhe.gif");}#nav .navsBox ul li.onbg {background-color:#F9DBD1;}#nav .navsBox ul li a {color:#000;text-decoration:none;}&lt;/style&gt;&lt;script src=&quot;js/jquery-1.11.3.min.js?1.1.11&quot;&gt;&lt;/script&gt;&lt;script&gt;$(function () {
            $(".firstNav").click(function () {var $ul= $(this).next();              if($ul.is(":visible")){
                  $ul.hide();
              }else{
                  $ul.show();
                  $ul.children().hover(function () {
                      $(this).addClass("onbg");
                  },function () {
                      $(this).removeClass("onbg")
                  })
              }
            })
        })&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;nav&quot;&gt;&lt;div class=&quot;navsBox&quot;&gt;&lt;div class=&quot;firstNav&quot;&gt;购物特权&lt;/div&gt;&lt;ul&gt;&lt;li class=&quot;jedh&quot;&gt;&lt;a href=&quot;#&quot;&gt;全额兑换&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;jlbbyk&quot;&gt;&lt;a href=&quot;#&quot;&gt;俱乐部包邮卡&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;jwljb&quot;&gt;&lt;a href=&quot;#&quot;&gt;购物领金币&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;mrljb&quot;&gt;&lt;a href=&quot;#&quot;&gt;每日领金币&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;vipjtj&quot;&gt;&lt;a href=&quot;#&quot;&gt;VIP阶梯价&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEin Beispiel-Tutorial für Hover. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn