如何让鼠标悬停在li上就可以点击里面的a链接_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:55:36
Original
2097 Leute haben es durchsucht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>CSS + ul li 横向排列的两种方法 </title><style type="text/css">*{margin:0; border:0; padding:0; font-size:13pt;}.leftfloat ul{list-style:none;}.leftfloat li{display:block;float:left;border:2px solid #FF0000;background-color:#FF0000;line-height:30px;margin:10px;border-radius:4px 4px 4px 4px;box-shadow:0 1px 3px rgba(34, 25, 25, 0.2);}.leftfloat li span {border:2px solid #00FF00;background-color:#00FF00;color:white;margin:0px;border-radius:4px 0px 0px 4px;float:left;}tags1.leftfloat li a{text-decoration:none;color:white;line-height:30px; text-align:left;font-size:14px;}.leftfloat li a:hover{color:#000;}</style></head><body><div class="leftfloat">  <ul>    <li><a href="#">aaaaaa</a><span>472</span></li>    <li><a href="#">bbbbbbbbbbbbbbbbbbbbbbbbbb</a><span>4700</span></li>    <li><a href="#">ccccccccccccc</a><span>400</span></li>    <li><a href="#">dddddddddddddddddd</a><span>42</span></li>  </ul></div></body></html>
Nach dem Login kopieren


如何让鼠标悬停在li上就可以点击里面的a链接,而不一定必须点击a链接呢?难点是:如果把a的css样式设置一下display:block 就不能和span保持一行了!!


回复讨论(解决方案)

js 去控制。。。。。
鼠标悬停在li上 再将a标签append到li里面。

可以实现,但两个缺点:
页面不能新窗口打开,由于触发灵敏,造成高的误操作,从而降低体验。

<div class="leftfloat">    <ul>        <li><a href="1">aaaaaa</a><span>472</span></li>        <li><a href="2">bbbbbbbbbbbbbbbbbbbbbbbbbb</a><span>4700</span></li>        <li><a href="3">ccccccccccccc</a><span>400</span></li>        <li><a href="3">dddddddddddddddddd</a><span>42</span></li>    </ul></div><script>    var ul = $('ul li');    ul.hover(function(){        location.href = $(this).find('a')[0].href;    });</script>
Nach dem Login kopieren


    


把span标签放到a标签里面就OK了
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage