CSS：扩大悬停答案

【问题标题】：CSS: Expanding the HoverCSS：扩大悬停
【发布时间】：2015-12-10 19:30:23
【问题描述】：

我的网站侧面有一个菜单栏，我希望悬停跨越菜单栏的宽度，到目前为止它只覆盖文本。

我希望它看起来像这样，并让它们都在菜单结束的地方结束

但它看起来像这样

HTML：

#menu {
    width: 21.4vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
	 font-size: 1vw;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 96vw;
    
}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li { 
    display: block; 

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.8vw 0.5vw 0.8vw;
	font-size: 3vw;
    
}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;

<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
<div id="menu">
<ul>
<li><a href="website.html">Home</a>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>
    
  </body>
  </html>

我是 HTML 和 CSS 新手，因此非常感谢任何帮助或建议 :)

【问题讨论】：

将您的 HTML 添加到问题中。
您因该更改而破坏了图像链接。

标签： html css menu hover

【解决方案1】：

你需要将display: block;添加到#menu a

#menu {
    width: 21.4vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
	 font-size: 1vw;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 96vw;
    
}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li { 
    display: block; 

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.8vw 0.5vw 0.8vw;
	font-size: 3vw;
    display: block;
}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;

<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
<div id="menu">
<ul>
<li><a href="website.html">Home</a>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>
    
  </body>
  </html>

【讨论】：

【解决方案2】：

a 元素是内联元素，与它们的内容相对应，这就是为什么白色区域仅与文本一样宽。

要解决这个问题，请将链接显示为块：

#menu a { display: block; }

默认情况下，块元素填充其父元素内部的可用宽度。

【讨论】：

【解决方案3】：

您可以将悬停伪类添加到 li 元素而不是元素。检查下面的代码。这样你高亮的背景就会对li的大小生效。

#menu {
    width: 21.4vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
	 font-size: 1vw;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 96vw;
    
}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li { 
    display: block; 

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.8vw 0.5vw 0.8vw;
	font-size: 3vw;
    
}
#menu li:hover {
    
    background-color: #FFFFFF;}

#menu li:hover a {
    
    color: #000;}

<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
<div id="menu">
<ul>
<li><a href="website.html">Home</a>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>
    
  </body>
  </html>

【讨论】：

【解决方案4】：

尝试添加

display: block;

到您的#menu 选择器。如果这不起作用，请提供菜单的 HTML。

【讨论】：