Home > Article > Web Front-end > 如何让鼠标悬停在li上就可以点击里面的a链接_html/css_WEB-ITnose
如何让鼠标悬停在li上就可以点击里面的a链接_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:55:362053browse
<!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> 如何让鼠标悬停在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>
把span标签放到a标签里面就OK了
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html页面显示乱码原因_html/css_WEB-ITnoseNext article：网页颜色间的色差计算_html/css_WEB-ITnose