Question

我使用全局元素选择器a:hover{}将鼠标悬停在网页中的大多数元素上。但是对于页脚中的所有元素，我想要覆盖悬停效果。

所以我的问题是如何在其他地方使用元素选择器a:hover{}时覆盖它，因为我不想让所有a元素悬停

HTML

<body>
        <div class="header">
            <div class="header_logo">
                <img id ="logo" src="civic-logo.jpg">
            </div>
            <div class="header_title">
                <div id="titles">
                    <ul>
                        <li><a href="#">ABOUT CIVIC</a><li>
                            <li><a href="#">PRODUCTS</a>  
                                <ul>
                                    <li><a href="#">CEMENT</a></li>
                                    <li><a href="#">STEEL</a></li>
                                    <li><a href="#">BRICKS</a></li>
                                    <li><a href="#">SAND</a></li>
                                </ul>
                            </li>
                            <li><a href="#">CONTACT US</a> </li>
                        </ul>

                        </div>
                    </div>
                </div>

                <div class="content">
                    <img src="images/clt3.jpg">
                </div>
                <div class="footer">
                    <div class="footer_upperspace">

                            <ul>
                                <li><a href="#">CIVIC HOME</a></li>
                                <li><a href="#">INQUIRY</a></li>
                            </ul>

                    </div>
                </div>


                </body>

CSS

    /*Main Header Container */
    .header{
      color:#FFFFFF;    /*White Color*/
      height:60px;
      width:100%;
      margin:auto;
    }
    /*Inner Logo Container on the left*/
    .header_logo{
      width:40%;
      height:100%;
      float:left;
    }
    #logo{
      height:100%;
      top:0;
      left:0;
      width:50%;
    }
    /*Inner Title Container on the right*/
    .header_title{
      width:60%;
      float:left;
    }
    #titles{
      position:absolute;
      top:20px;
      font-family: "Times New Roman", Times, serif,Georgia;
      font-size:97%;
      color:#B8B8B8;
    }
    ul{
      list-style-type:none;
    }
    li{
      display:inline-block;
    }

    a{
      text-decoration: none;
      color:inherit;
      padding: 21px 10px;
    }

    ul a:hover{
      background-color:#666699;  /*Purple Color */

    }

    ul li ul{
      display:none; /*Hiding The Child Elements*/
    }
    li ul li{
        padding: 21px 10px;
        background-color:#666699 ;
        }


    ul li:hover ul{   /*For all the ul elements whose parent is being hovered over*/
      display: block;
      position: absolute;

      width: 100%;
      top: 40px;
      left: 0;
      white-space: nowrap;
    }

    ul li ul li:hover{
        background-color:#C0C0C0;   
        }

      *{border:0;
        margin:0;
        padding:0;
        }
    /*Main Content Section*/
    .content{
        height:525px;
        margin:auto;
        background-color:#C0C0C0;
        }
        img{
            width:1280px;
            height:515px;
            }
/*Footer*/

        .footer {
        margin:auto;
        background-color:#707070;
        height: 100px;
    }

    .footer_upperspace  {
        background-color:#C0C0C0;
        height:40%;
    }

我附上了JSFiddle，让您了解我在做什么

https://jsfiddle.net/rajivsr2309/b2o3Lzny/

Answer 1

试试这个：

.footer a:hover { background-color: yellow; }

Revised Demo

.footer前面有a:hover，现在是descendant combinator selector，它只匹配存在于类footer的元素中的悬停锚元素。

Answer 2

您始终可以使用更严格的选择器（更高specificity）来覆盖不太严格的选择器。例如：

＆＃13;

a:hover {color: red}
a.cancel:hover {color: green}

＆＃13;

<a href="">Some link</a>
<a href="">Some link</a>
<a href="">Some link</a>
<a href="">Some link</a>
<a href="" class="cancel">Some different link</a>
<a href="">Some link</a>

＆＃13;

在您的情况下，选择器为：.footer a:hover：https://jsfiddle.net/b2o3Lzny/2/

同样，既然你正试图撤消一般规则，也许你的做法是错误的，你可以考虑为那些想要风格的主持人制作一个特定的课程，而不是全部锚点，然后撤消它们中的许多。

覆盖页脚

2 个答案: