CODEWITHSUNDEEP
htmlcsscss-selectorshover
user3402248
user3402248

Reputation: 469

Overriding global anchor hover styles in footer

I have used the global element selector a:hover{} for hovering over most elements in the web page. But for all the elements in the footer, I would like to override the hovering effect.

So my question is how can I override the element selector a:hover{} when it is used elsewhere since I don't want all the a elements to hover

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%;
    }

I have attached the JSFiddle to give you an insight of what I am doing

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

Upvotes: 1

Views: 1162

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372264

Try this:

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

Revised Demo

With .footer preceding a:hover, this is now a descendant combinator selector which matches only hovered anchor elements that exist within elements with class footer.

Upvotes: 1

Shomz
Shomz

Reputation: 37711

You can always use a stricter selector (with higher specificity) to override the less strict one. For example: 

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>

In your case, the selector is: .footer a:hover: https://jsfiddle.net/b2o3Lzny/2/

Again, since you're trying to undo a general rule, perhaps your approach is wrong and you could consider making a specific class just for those anchors you want to style, not all of the anchors, and then undo many of them.

Upvotes: 1

Related Questions