使整个元素成为导航栏中的可单击区域
[英]Make entire element a clickable area in navigation bar
问题描述
In the below code when I hover over the navigation items like Home/About/Contact/Popular Posts, only the portion of <a> is getting background color. 
在下面的代码中，当我将鼠标悬停在首页/关于/联系人/受欢迎的帖子等导航项目上时，仅<a>的一部分会获得背景色。
But I want the complete Home Block to get highlighted when hovered. 但我希望将完整的Home Block悬停时突出显示。
And at the same time with my flexbox I want my extra space to be distributed between the list items as done below. 同时，我希望使用flexbox在列表项之间分配额外的空间，如下所示。
html { font-size: 16px; } * { box-sizing: border-box; } a { text-decoration: none; font-size: 1.5em; display: inline-block; color: rgb(250, 250, 250); } nav { background: rgba(10, 10, 10, 0.9); border: 5px solid rgba(150, 175, 200, 0.4); max-width: 700px; margin: 0 auto; } nav>ul { padding: 0; margin: 0; display: flex; } nav>ul>li { list-style: none; flex: 1; } nav>ul>li>a { padding: 10px; } nav>ul>li :hover { background: rgb(240, 100, 100); }
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Popular Posts</a></li> </ul> </nav>
3 个解决方案
解决方案1
0 2015-10-14 19:22:26
Simply make it 简单地做到
nav > ul :hover {
background : rgb(240, 100, 100);
}
and it should work (take out the li ) 它应该工作（取出li ）
解决方案2
0 2015-10-14 19:27:58
Is this what you missed ? 这是你错过的吗？ : ：
nav > ul > li > a {
display: block;
}
demo below 下面的演示
html { font-size: 16px; } * { box-sizing: border-box; } a { text-decoration: none; font-size: 1.5em; display: inline-block; color: rgb(250, 250, 250); } nav { background: rgba(10, 10, 10, 0.9); border: 5px solid rgba(150, 175, 200, 0.4); max-width: 700px; margin: 0 auto; } nav > ul { padding: 0; margin: 0; display: flex; } nav > ul > li { list-style: none; flex: 1; } nav > ul > li > a { padding: 10px; display: block; } nav > ul > li:hover { background: rgb(240, 100, 100); }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <title>Nav BAr</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> <li><a href="#">Popular Posts</a> </li> </ul> </nav> </body> </html>
解决方案3
0 已采纳 2015-10-14 19:31:12
Method #1 方法1
Remove the borders around nav : 删除nav周围的边界：
nav {
background: rgba(10,10,10,0.9);
/* border: 5px solid rgba(150,175,200,0.4); <---- REMOVE */
max-width: 700px;
margin: 0 auto;
}
I'm assuming when you say "complete block" and "entire flex item" you mean hover over everything. 我假设当您说“完整块”和“整个弹性项目”时，您的意思是将鼠标悬停在所有内容上。 But if you still want the border, just ignore the step above. 但是，如果仍然需要边框，则只需忽略上面的步骤。
Method #2 方法＃2
Add display: block to a elements: 添加display: block到a元素：
nav > ul > li > a {
padding: 10px;
display: block; /* NEW */
}
An anchor element will, by default, extend only the length of its content. 默认情况下，锚元素将仅扩展其内容的长度。 By making it a block element it will extend the full width of its container. 通过使其成为块元素，它将扩展其容器的整个宽度。
html { font-size: 16px; } * { box-sizing: border-box; } a { text-decoration: none; font-size: 1.5em; display: inline-block; color: rgb(250, 250, 250); } nav { background: rgba(10, 10, 10, 0.9); /* border : 5px solid rgba(150,175,200,0.4); */ max-width: 700px; margin: 0 auto; } nav>ul { padding: 0; margin: 0; display: flex; } nav>ul>li { list-style: none; flex: 1; } nav>ul>li>a { padding: 10px; display: block; } nav>ul>li :hover { background: rgb(240, 100, 100); }
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Popular Posts</a></li> </ul> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.