gpt4 book ai didi

javascript - 为什么我的 .hover() 事件处理程序的
  • 元素的颜色属性没有改变?
  • 转载 作者:行者123 更新时间:2023-11-30 16:29:57 25 4
    gpt4 key购买 nike

    <!doctype HTML>
    <html>

    <head>
    <title>HUSTLE PAY$</title>
    <meta name="viewport" content="width = device - width, initial scale=1.0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    我希望 jquery 为我做的是:

    1. 当您将鼠标悬停在 LI 元素上时,该元素的背景颜色应变为 #0066cc(效果很好)。但是,我还希望在同一悬停时字体颜色变为白色。这是我的代码失败的地方,因为字体没有变白。

    2. 当 .hover 不再发生时,列表的原始颜色应该恢复正常。

      $(document).ready(function(){
      $('li').hover(function(){
      $(this).css({"background-color" : "#0066cc" , "color" : "white"})
      },function(){
      $(this).css({"background-color" : "#0000cc" , "color" : "black"})
      });

      })

    我认为 jquery 脚本的位可以完成这项工作,但它没有正确执行。我缺少什么才能使这项工作对我有用?

        .menu{
    display:inline;
    float:left;
    width:10%;
    }

    ul{
    background-color:#0000cc;
    display:inline;
    float:left;
    border:1px solid black;
    width:60%;
    height:100px;
    text-align:center;
    }
    li{
    border:1px solid red;
    list-style-type:none;
    padding-left:0px;
    padding-right:0px;
    height:30px;
    font-size:30px;
    text-align:center;
    }
    a{
    color:black;
    }

    </style>
    </head>

    <body>
    <header>
    <div>
    <img src = "greenProject/images/menu.jpeg" class = "menu" alt = "Image not available">
    </div>

    <ul>
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Contact Us</a></li>
    </ul>

    </header>
    </body>
    </html>

    最佳答案

    列表项的文本颜色变化得很好,但这不会影响列表项中链接的文本颜色。

    要设置链接的文本颜色,您需要在列表项中找到它们:

    $(document).ready(function(){
    $('li').hover(function(){
    $(this).css({"background-color" : "#0066cc" }).find('a').css({ "color" : "white" });
    },function(){
    $(this).css({"background-color" : "#0000cc" }).find('a').css({ "color" : "black" });
    });
    });

    您也可以在 CSS 中执行此操作,而不是使用 Javascript 事件:

    li:hover {
    background: #0066cc;
    }
    li:hover a {
    color: white;
    }

    关于javascript - 为什么我的 .hover() 事件处理程序的 <li> 元素的颜色属性没有改变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33467088/

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