How should I override hover style of a div in an anchor tag?
<p>based on <a href="https://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct">the discussion</a> here we know that it is allowed to put an <code>&lt;div&gt;</code> in an <code>&lt;a&gt;</code> tag given that we're using html5, but I was wondering that how can we change the styles in this <code>&lt;div&gt;</code>. In short, I have an html code skeleton like this:</p>

<pre><code>&lt;a href='somelink.html'&gt;
    &lt;div style='width:100px; height:100px'&gt;
         text text text
    &lt;/div&gt;
&lt;/a&gt;
</code></pre>

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

<p>To give you a concrete example, I was playing on the <a href="http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more1" rel="nofollow noreferrer">w3cschool.com</a>, and the full codes are provided below. I put comments indicating where the codes to be filled in.</p>

<p>See the background color of the square <code>div</code> 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. </p>

<p><strong>Task</strong></p>

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

<p><strong>Code</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        /* 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 ==== */

      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;p&gt;Mouse over and click the link: &lt;a href="http://www.w3schools.com"&gt;w3schools.com&lt;/a&gt;&lt;/p&gt;

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

<p>Thanks for your answer in advance.</p>

<p><strong>Edit 1: More background</strong></p>

<p>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, </p>

<pre><code>&lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading"&gt;This to be an anchor&lt;/div&gt;
  &lt;div class="panel-body"&gt;Panel Content&lt;/div&gt;
&lt;/div&gt;
</code></pre>