导航栏使用 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>

So yeah, it's a bit messy but basically I'm trying to learn some Html + CSS and I have an issue when creating a navigation bar.所以是的，它有点乱，但基本上我正在尝试学习一些 Html + CSS 并且在创建导航栏时遇到问题。 I want to make the text "pop" when you hover over it and so I increased the text-size to 250% on hover...however, I also want to make that "poped" change its background to green(just for the sake of this discussion), but I want that green background to extend so it reaches the previous <li> and the <li> after it.我想让文本在 hover 上方时“弹出”，所以我在 hover 上将文本大小增加到 250% ......但是，我也想让“弹出”将其背景更改为绿色（仅用于为了这个讨论），但我希望绿色背景延伸，以便它到达前一个<li>和它之后的<li> 。 For instance, I hover over "News" and it pops and the background reaches "e" from Home and "C" from contacts.例如，我在“新闻”上的 hover 弹出，背景从主页到达“e”，从联系人到达“C”。 I hope any of this makes sense.我希望这一切都有意义。

Also, this is not something for my university/company...etc...just for my personal gain as a noob who wants to learn to create websites from scratch.此外，这不是我的大学/公司...等等...只是为了我作为一个想要学习从头开始创建网站的菜鸟的个人利益。 Also this is my first navigation bar I ever made so feel free to give me criticism:D这也是我制作的第一个导航栏，所以请随时批评我：D

Answer 1

Funny request haha, but I think something like this might work.有趣的请求哈哈，但我认为这样的事情可能会奏效。 If you add an extra <div> inside your <li>s .如果您在<li>s中添加额外的<div> 。

<li>
  <a href="#">Home</a>
  <div class="extend"></div>
</li>

Then, give your <li> position: relative;然后，给你的<li> position: relative;

And give the .extend the following CSS并给.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;
}

Then make it so when you hover over your <li> , your .extend change to display: block然后当你在你的<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