gpt4 book ai didi

css - 显示悬停的
  • 转载 作者:行者123 更新时间:2023-11-28 13:24:08 25 4
    gpt4 key购买 nike

    我有一个简单的 CSS 列表。我要第一个<li>悬停要显示的行。我怎样才能做到这一点?我试过这样的事情:<li class="#menu a:hover"><a href="#">Option 1</a></li>但不幸的是不起作用。

    感谢您的宝贵时间!

    代码是:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>A simple menu</title>
    <style type="text/css">
    #menu a:hover{
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li class="#menu a:hover"><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
    <ul>
    </div>
    </body>
    </html>

    最佳答案

    我猜你想要第一个链接的黄色背景所以这样做

    #menu ul li:nth-child(1) a {
    background-color: yellow;
    }

    或者简单地给出一个类例如.current

    .current {
    background-color: yellow;
    }

    <div id="menu">
    <ul>
    <li><a href="#" class="current">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
    <ul>
    </div>

    如果您打算突出显示当前页面而不是回答,您不能使用 CSS 来实现,您将需要 JavaScript/jQuery 或服务器端编程,如 PHP

    关于css - 显示悬停的 <li> 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14585868/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com