<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%...但是，我也想让“弹出”将其背景更改为绿色（仅用于为了便于讨论），但我希望绿色背景能够延伸，以便它到达前面<li>和<li>后面。例如，我将鼠标悬停在“新闻”上，它会弹出，并且背景从主页达到“e”，从联系人达到“C”。我希望这一切都是有道理的。另外，这不适合我的大学/公司……等等……只是为了我作为一个想要从头开始学习创建网站的菜鸟的个人利益。这也是我制作的第一个导航栏，所以请随意给我批评：D
1 回答
开心每一天1111
TA贡献1836条经验 获得超13个赞
有趣的请求哈哈，但我认为这样的事情可能会起作用。如果您<div>在<li>s.
<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;
}
- 1 回答
- 0 关注
- 84 浏览
添加回答
举报
0/150
提交
取消