导航栏使用 html 和 css，a：hover 问题

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 并且在创建导航栏时遇到问题。 我想让文本在 hover 上方时“弹出”，所以我在 hover 上将文本大小增加到 250% ......但是，我也想让“弹出”将其背景更改为绿色（仅用于为了这个讨论），但我希望绿色背景延伸，以便它到达前一个<li>和它之后的<li> 。 例如，我在“新闻”上的 hover 弹出，背景从主页到达“e”，从联系人到达“C”。 我希望这一切都有意义。

此外，这不是我的大学/公司...等等...只是为了我作为一个想要学习从头开始创建网站的菜鸟的个人利益。 这也是我制作的第一个导航栏，所以请随时批评我：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>上 hover 时，你的.extend更改为display: block

li:hover > .extend {
  display: block;
}

导航栏使用 html 和 css，a：hover 问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-03 00:15:27

导航栏使用 html 和 css，a：hover 问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-03 00:15:27

解决方案1
1 已采纳 2020-04-03 00:15:27