html_html/css_WEB-ITnoseのliの簡易表示・非表示-htmlチュートリアル-php.cn

回帰论(解決案)

ホームページ

ウェブフロントエンド

htmlチュートリアル

html_html/css_WEB-ITnoseのliの簡易表示・非表示

Jun 21, 2016 am 08:55 AM

页面代码：
<div>图书 ></div>

小说

回帰论(解決案)

&lt;script type=&quot;text/javascript&quot; src=&quot;http://libs.baidu.com/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;&lt;div id=&quot;bbb&quot;&gt;图书   &gt;&lt;/div&gt;&lt;div id=&quot;aaa&quot;&gt; &lt;li style=&quot;float:left;&quot;&gt;11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt;&lt;/div&gt;&lt;script type=&quot;text/javascript&quot;&gt;function lishow() {	$(&quot;#aaa li&quot;).show();}function lihide() {	$(&quot;#aaa li&quot;).slice(3).hide();}$(lihide);var timer;$(&quot;#bbb&quot;).mouseenter(function(event){	lishow();}).mouseleave(function(event){	timer = setTimeout(lihide, 300);});$(&quot;#aaa&quot;).mouseenter(function(event){	clearTimeout(timer);}).mouseleave(function(event){	lihide();});&lt;/script&gt;

ログイン後にコピー

2 楼大神、機能は実現しています。ただし、後面に同様の図がある場合は使用できません。
<div id="bbb"> ;图书1 ></div>
<div id="aaa">
<li style="float:left;">11</li>
<li style="float:left;">|11</li>
<li style="float:left;">|11</li>
<li style="float:left;">|11</li>
<li style="float:left;">|11</li>
<li style="float:left;">|11</li>

場合私が想う図 2 (図 3...) も同様の機能を実現します。修正。

&lt;script type=&quot;text/javascript&quot; src=&quot;http://libs.baidu.com/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;&lt;div class=&quot;bbb&quot;&gt;图书1   &gt;&lt;/div&gt;&lt;div&gt; &lt;li style=&quot;float:left;&quot;&gt;11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt;&lt;/div&gt;&lt;div class=&quot;bbb&quot;&gt;图书2   &gt;&lt;/div&gt;&lt;div&gt; &lt;li style=&quot;float:left;&quot;&gt;11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt; &lt;li style=&quot;float:left;&quot;&gt;|11&lt;/li&gt;&lt;/div&gt;&lt;script type=&quot;text/javascript&quot;&gt;function lishow(t) {	$(t).next().find(&quot;li&quot;).show();}function lihide(t) {	$(t).find(&quot;li&quot;).slice(3).hide()}$(function() {	$(&quot;.bbb&quot;).each(function() {		lihide($(this).next());	});});var timer;$(&quot;.bbb&quot;).mouseenter(function(event){	lishow(this);}).mouseleave(function(event){	var t = $(this).next();	timer = setTimeout(function() {		lihide(t);	}, 300);});$(&quot;.bbb&quot;).next().mouseenter(function(event){	clearTimeout(timer);}).mouseleave(function(event){	lihide(this);});&lt;/script&gt;

ログイン後にコピー

大神、辛苦你了。我就想做网易http://yuedu.163.com/。
(マウスが図に移動する時期)。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。