title: How should I override hover style of a div in an anchor tag?
body: <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>