使用html和css的导航栏，a：悬停问题
<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
有趣的请求哈哈，但我认为这样的事情可能会起作用。如果您<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: blockli:hover > .extend { display: block;}
随时随地看视频慕课网APP
相关分类
Html5