How should I override hover style of a div in an anchor tag?

Question

based on the discussion here we know that it is allowed to put an <div> in an <a> tag given that we're using html5, but I was wondering that how can we change the styles in this <div>. In short, I have an html code skeleton like this:

<a href='somelink.html'>
    <div style='width:100px; height:100px'>
         text text text
    </div>
</a>

The motivation is that I hope to achieve the effect that when the mouse hovers over the div (not only over the text), both the background and the text color in div changes. Note that somewhere in the css file, the third-party template already defines a:hover (a:focus), and I want to override the hover behavior just in this particular div. Can somebody give me a hint how I should achieve that?

To give you a concrete example, I was playing on the w3cschool.com, and the full codes are provided below. I put comments indicating where the codes to be filled in.

See the background color of the square div is light gray and the text color inside is green with an underline, and the text color changes to red when the mouse hovers over the text.

Task

I hope the effective area is the entire div, i.e., when the mouse is in the div, the following can be achieved: 1) the div changes to pink color, and 2) the text color becomes white, and 3) there's no underline when hovered anymore.

Code

<!DOCTYPE html>
  <html>
    <head>
      <style>
        /* Assume following 4 rules are provided somewhere in the existing css */
        a:link {
          color: green;
        }

        a:visited {
          color: green;
        }

        a:hover {
          color: red;
        }

        a:active {
          color: yellow;
        } 

        /* ==== CHANGE HERE ======== */
        .fill_a {
          // what is the answer?
        }

        .fill_div {
          // what is the answer?
        }
        /* ==== CHANGE HERE END ==== */

      </style>
    </head>
    <body>

    <p>Mouse over and click the link: <a href="http://www.w3schools.com">w3schools.com</a></p>

    <a href='#' class='fill_a'>
      <div style='width:100px; height:100px; background-color:#ddd' class='fill_div'>
        123
      </div>
    </a>
  </body>
</html>

Thanks for your answer in advance.

Edit 1: More background

I was seeking a non-div solution (use block'ed anchor or just a span), but the dilemma I encountered is that I was using bootstrap, especially, I want the head to be the entire link, that's kinda the motivation. For example,

<div class="panel panel-default">
  <div class="panel-heading">This to be an anchor</div>
  <div class="panel-body">Panel Content</div>
</div>

Why do you need a `div` inside an anchor? You can remove the `div` and use only a blocked `` — Jose Rui Santos, Feb 25 '16 at 07:35
Isn't **[this](https://jsfiddle.net/1gxwr6gq/)** more simple? — Jose Rui Santos, Feb 25 '16 at 07:41
@jose is right. And if you want to keep the text in center vertically then instead of height you can give padding to top and bottom accordingly to the anchor tag. — Ashish, Feb 25 '16 at 07:45
@Akash The correct way to have the text vertically centered, is to replace the `height` (on my jsfiddle link), by `line-height`. — Jose Rui Santos, Feb 25 '16 at 07:50

Fiido93 · Accepted Answer · 2016-02-25T09:24:56.627

4

Based on your HTML

From your Task

CSS

.fill_a:hover{
  color:white;
  text-decoration:none;
}

.fill_div:hover{
  background-color:pink !important;
}

you should use !important because in your html you already set the style. Meaning that the style that put inside html is priority.

Learn More about styling css https://css-tricks.com/when-using-important-is-the-right-choice/

DEMO

edited Feb 25 '16 at 09:24

answered Feb 25 '16 at 07:25

Fiido93

1,918
1
15
22

very nice. I had to override bootstrap css – Shashi3456643 Mar 10 '17 at 21:05
1

this help. I can apply to my css to override – daz Mar 04 '21 at 22:49

StudioTime · Answer 2 · 2016-02-25T07:35:05.113

1

Try this css:

a.fill_a {
  text-decoration: none;
}
a.fill_a:hover > div.fill_div {
  background-color: pink !important;
  color: #fff;
}

Fiddle demo here

edited Feb 25 '16 at 07:35

answered Feb 25 '16 at 07:23

StudioTime

22,603
38
120
207

I was wondering is there a way not to use `!important`? Actually I am even not sure why we have to use `!important`, I just know if we take this out, it doesn't work... – TimeString Feb 25 '16 at 08:17
If you take `background-color:#ddd` out of inline styling and add it using css then you won't have to use `!important` – StudioTime Feb 25 '16 at 12:59

How should I override hover style of a div in an anchor tag?

2 Answers2