导航栏使用html和css，a:悬停问题

Question

    <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%...但是，我还想让 "poped" 将其背景更改为绿色（只是为了这个讨论），但我希望绿色背景延伸，以便它到达前一个 <li> 和它后面的 <li>。例如，我将鼠标悬停在 "News" 上，它弹出，背景从主页到达 "e"，从联系人到达 "C"。我希望这是有道理的。

此外，这不适合我 university/company...等...只是为了我作为一个想从头开始学习创建网站的菜鸟的个人利益。这也是我制作的第一个导航栏，欢迎大家批评指正 :D

Answer 1

有趣的请求哈哈，但我认为这样的事情可能会奏效。如果您在 <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;
}

导航栏使用html和css，a:悬停问题

Navigation bar using html and css, a: hover question

html

css

navigationbar