<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
margin:0px;
padding:0;
overflow:hidden;
list-style-type: none;
}
li a{
display:inline;
color:black;
font-family:Georgia;
text-align: center;
font-size:200%;
text-decoration:none;
border-left:1px solid gray;
}
li a:hover{
color:rgb(72, 145, 123);
text-align:center;
font-family:Georgia;
font-size:250%;
background:green;
text-decoration:none;
display:inline;
padding:0%;
}
li a:active{
color:chartreuse;
}
body
{
width:100%;
height:100%;
margin:0
}
li{float:left; padding-left:3%; background:#c0c9d3;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
是的，这有点乱，但基本上我正在尝试学习一些Html+CSS，在创建导航栏时遇到了问题。我想让文本在你悬停时"弹出"，所以我在悬停时将文本大小增加到250%。。。然而，我也想让"poped"将其背景更改为绿色(只是为了讨论(，但我希望绿色背景扩展，使其达到前一个<li>和后一个<li>。例如，我将鼠标悬停在"News"上，它会弹出，背景从Home变为"e"，从contacts变为"C"。我希望这些都有道理。
此外，这不是我的大学/公司的事情。。。等等…只是为了我个人的利益，作为一个想从头开始学习创建网站的人。这也是我制作的第一个导航栏，所以可以自由地批评我：D
有趣的请求哈哈，但我认为这样的东西可能会奏效。如果在<li>s中添加一个额外的<div>。
<li>
<a href="#">Home</a>
<div class="extend"></div>
</li>
然后，给你的<li> position: relative;
并给.extend以下的CSS
.extend {
position: absolute;
background-color: rgba(50, 205, 50, 0.5); //change as you wish
top: 0;
bottom: 0;
left: -100px; //change this to your preference
right: -100px; //change this to your preference
display: none;
z-index: 2;
}
然后，当您将鼠标悬停在<li>上时，.extend将变为display: block
li:hover > .extend {
display: block;
}