将鼠标悬停在第一个孩子无法正常工作的链接上

Posted

技术标签:

【中文标题】将鼠标悬停在第一个孩子无法正常工作的链接上【英文标题】：Hovering over link not working correctly for first child 【发布时间】：2021-10-08 13:40:19 【问题描述】：

所以，当我将鼠标悬停在导航栏上时，我只想制作导航栏的第一个元素来改变它的背景颜色，但是即使我写了a:first-child:hover，“主页”和“新闻”按钮都会改变颜色。请帮忙。

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, nav, ul, li, a, span
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            

            .nav, header
                display: block;
            

            ol, ul
                list-style: none;
            

            a
                text-decoration: none;
            

            #header h1 
                left: 1.25em;
                margin: 0;
                position: absolute;
            

            #header 
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;    
                z-index: 100;

            

            #header a, #header a:visited
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            

            #header nav
                position: absolute;
                right: 1em;
                top: 0;
            
                #header nav ul li
                    display: inline-block;
                    margin-left: 1em;
                 
                    #header nav ul li a:first-child:hover
                        background-color: red;
                    

        </style>
        
    </head>

    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

【问题讨论】：

这两个链接都是它们各自父元素的第一个子元素。您需要将此伪类应用于li，选择父ul 内的那些 中的第一个。 【参考方案1】：

:first-child 应该给li，而不是a。

因为，每个li 内部只有a 的单个子级，但ul 内部有多个li。所以:first-child应该给li，然后悬停到a

  #header h1 
      left: 1.25em;
      margin: 0;
      position: absolute;
  

  #header 
      background: rgba(39, 40, 51, 0.965);
      box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

      width: 100%;
      height: 3.5em;

      left: 0;
      top: 0;

      line-height: 3.5em;
      position: fixed;    
      z-index: 100;

  

  #header a, #header a:visited
      color: rgba(224, 224, 224, 0.986);

      -o-transition: 0.5s;
      -ms-transition: 0.5s;
      -moz-transition: 0.5s;
      -webkit-transition: 0.5s;
      transition: 0.5s;

      font-size: 125%;
  

  #header nav
      position: absolute;
      right: 1em;
      top: 0;
  
  #header nav ul li
      display: inline-block;
      margin-left: 1em;
   
  #header nav ul li:first-child a:hover
      background-color: red;
  
<header id="header">
    <h1 id="logo"><a href="#">Random</a></h1>
    <nav id="nav">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="#2">News</a></li>
        </ul>
    </nav>
</header>

【讨论】：

是的，就是这样！我现在觉得有点傻，不会撒谎。感谢您这么快回复！【参考方案2】：

将鼠标悬停在 li 而不是元素上。 尝试关注

<html>
    <head>
        <style>
            html, nav, ul, li, a, span
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            

            .nav, header
                display: block;
            

            ol, ul
                list-style: none;
            

            a
                text-decoration: none;
            

            #header h1 
                left: 1.25em;
                margin: 0;
                position: absolute;
            

            #header 
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;    
                z-index: 100;

            

            #header a, #header a:visited
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            

            #header nav
                position: absolute;
                right: 1em;
                top: 0;
            
                #header nav ul li
                    display: inline-block;
                    margin-left: 1em;
                 
                    #header nav ul li:first-child:hover a 
    background-color: red;


        </style>
        
    </head>

    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

【讨论】：

【参考方案3】：

问题是“a”是两个“li”元素的第一个子元素，这意味着您必须在“li”上使用:first-child，然后在“a”元素上使用:hover。

            html, nav, ul, li, a, span
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            

            .nav, header
                display: block;
            

            ol, ul
                list-style: none;
            

            a
                text-decoration: none;
                padding: 2px;
                border-radius: 2px;
            

            #header h1 
                left: 1.25em;
                margin: 0;
                position: absolute;
            

            #header 
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;
                z-index: 100;

            

            #header a, #header a:visited
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            

            #header nav
                position: absolute;
                right: 1em;
                top: 0;
            
                #header nav ul li
                    display: inline-block;
                    margin-left: 1em;
                
                    #header nav ul li:first-child a:hover 
                        background-color: red;
                    
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="#1">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

【讨论】：

以上是关于将鼠标悬停在第一个孩子无法正常工作的链接上的主要内容，如果未能解决你的问题，请参考以下文章

jQuery slideDown 无法正常工作

将鼠标悬停在模式链接上时隐藏浏览器状态栏上的链接

GWT CellTable 工具提示无法正常工作

如何将鼠标悬停在 SVG 矩形上？

CSS 翻转 - 悬停问题？

VueJS父鼠标悬停事件屏蔽子鼠标悬停事件