如何在css中突出显示整行？

Question

我试图让整个屏幕上的橙色部分而不仅仅是在文本上？所以当有人在它上面盘旋时，橙色会出现在所选菜单项

上

Capture

这是我的代码

    * {
	margin: 0;
	padding: 0;
    }

    html {
	background: #76787a;
	font-family: Arial, sans-serif;
	font-weight: bold;
    }

    .container {
	text-align: center;
	list-style-type: none;
    }

    a {
	text-decoration: none;
	background-color: #c67b3d;
    }

    a:hover {
	background-color: green;
    }

    .menu li a {
	color: yellow;
	font-size: 160px;
    }

	    <div class="container">
		  <nav class="menu">
			<li><a href="index.html">HOME</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">WORK</a></li>
			<li><a href="#">CONTACT</a></li>
	    </div>
     

Answer 1

修改你的css文件： 放：

background-color: #c67b3d; max-width: 100%;

<。> in .container

Answer 2

制作.menu li a display: block。

不确定您是否需要margin-bottom: 10px;

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html {
  background: #76787a;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.container {
  text-align: center;
  list-style-type: none;
}

a {
  text-decoration: none;
  background-color: #c67b3d;
}

a:hover {
  background-color: green;
}

.menu li a {
  display: block;
  margin-bottom: 10px;
  color: yellow;
  font-size: 160px;
}

＆＃13;

<div class="container">
  <nav class="menu">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">WORK</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将display: block添加到a元素即可。您甚至可以删除<li>元素和<nav>元素。

＆＃13;

＆＃13;

* {
  margin: 0;
}

.container {
  text-align: center;
}

a {
  text-decoration: none;
  display: block;
  background-color: orange;
}

a:hover {
  background-color: green;
}

＆＃13;

<div class="container">
  <a href="index.html">HOME</a>
  <a href="#">ABOUT</a>
  <a href="#">WORK</a>
  <a href="#">CONTACT</a>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/pfvf10g5/

Answer 4

色彩效果需要应用于.menu li而不是.menu li a。

此代码的片段是 here.