如何使整个块可点击? [英] how to make the whole block clickable?
本文介绍了如何使整个块可点击?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个导航菜单,但是我面对的问题是,当我将鼠标悬停在边上时,每个菜单块的ancor标记都不起作用,只有当我将鼠标放在文本附近时,它才起作用。我的问题是,我想让整个块可点击任何解决方案?
这里小提琴。
标记。
< div id =nav>
< ul class =menu>
< li>< a href =index.html>主页< / a>< / li>
< li>< a href =about.html>关于< / a>< / li>
< li>< a href =/ work />产品< / a>< / li>
< li>< a href =/ contact />招聘< / a>< / li>
< li>< a href =/ contact />联络< / a>< / li>
< / ul>
< / div>
CSS。
#nav {
width:960px;
背景:#222222;
}
.menu {
width:960px;
margin:auto;
padding:0;
list-style:none;
text-align:center;
}
.menu li {
display:block;
border-right:5px solid#222222;
border-bottom:3px solid#222222;
padding:10px;
float:left;
width:166px;
height:20px;
font-family:'Open Sans',sans-serif;
font-size:14px;
背景:#0C5E91;
}
.menu li:hover {
background:#95d629;
}
.menu li a {
display:block;
float:left;
width:140px;
height:20px;
font-family:'Open Sans',sans-serif;
font-size:14px;
}
.menu li a {
text-decoration:none;
颜色:白色;
解决方案
添加 width
, height
和 padding
添加到 < / a>
元素,而不是< li>
。
I have create a navigation menu but the problem i face is that when i hover my mouse to the edge each menu block the ancor tag does not work, it works only when i place the mouse near the text. my question is that i want to make the whole block clickable any solutions?
Here a fiddle.
The markup.
<div id="nav">
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="/work/">Products</a></li>
<li><a href="/contact/">Careers</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
The CSS.
#nav {
width: 960px;
background: #222222;
}
.menu {
width: 960px;
margin: auto;
padding: 0;
list-style: none;
text-align: center;
}
.menu li {
display: block;
border-right: 5px solid #222222;
border-bottom: 3px solid #222222;
padding: 10px;
float: left;
width: 166px;
height: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
background: #0C5E91;
}
.menu li:hover {
background: #95d629;
}
.menu li a {
display: block;
float: left;
width: 140px;
height: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.menu li a {
text-decoration: none;
color: white;
}
解决方案
Add width
, height
, and padding
to the </a>
element, not the <li>
.
这篇关于如何使整个块可点击?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文