<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,并且在创建导航栏时遇到问题。当您将鼠标悬停在其上时,我想使文本为“ pop”,因此在悬停时我将文本大小增加到250%...但是,我也想使该“ pop”将其背景更改为绿色(仅适用于(为了便于讨论),但我希望扩展绿色背景,使其到达之前的<li>
和之后的<li>
。例如,我将鼠标悬停在“新闻”上,它弹出,背景从“主页”到达“ e”,从联系人到达“ C”。我希望这些都有意义。
此外,这对我的大学/公司来说也不是什么。。。。。。。。。这也是我制作的第一个导航栏,请随时提出批评:D