覆盖页脚中的全局锚点悬停样式

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，它只匹配 class footer 元素中存在的悬停锚点元素。

Answer 2

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

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

<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>

在你的例子中，选择器是：.footer a:hover: https://jsfiddle.net/b2o3Lzny/2/

同样，由于您正在尝试撤消一般规则，也许您的方法是错误的，您可以考虑为那些您想要[=29=的锚定一个特定的class ] 设置样式，而不是所有的锚点，然后撤消其中的许多锚点。

覆盖页脚中的全局锚点悬停样式

Overriding global anchor hover styles in footer

html

css

hover

css-selectors