title: Change tile colour on mouse hover in HTML,CSS
body: <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  
  
  .box {
    float: left;
    width: 175px;
    height: 100px;
    margin: 0.2em;
    background color: DarkGray;
  }
  
  .head{
  color: green;
  }
  
  h1{
  color: white;
  text-align: center;
  height: 2%;
  margin-top: auto;
  margin-bottom: auto;
  }
  
  p{
  color: LightSalmon;
  text-align: center;
  height: 5%;
  margin-top: auto;
  margin-bottom: auto;
  }
  a:link{
     text-decoration: none;
  }
  a:visited{
     text-decoration: none;
  }
  a:active{
     text-decoration: none;
  }
  a :hover{
     text-decoration: none;color:green;background-color: yellow;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1 class="head"&gt;
  MY BLOCKS
  &lt;/h1&gt;
  &lt;a href="https://www.google.co.uk" target="_blank"&gt;&lt;div class="box"&gt;&lt;h1&gt;Block0&lt;/h1&gt;&lt;p&gt;It is a floating Block0&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In this code, I need to change colour of my 'div' on mouse hover...I have tried almost everything i found online including tips from here. Didn't work. Please help. What can I replace for line,</p>
  
  <pre><code>a :hover{
         text-decoration: none;color:green;background-color: yellow;
      }
  </code></pre>
  
  <p>I have tried</p>
  
  <pre><code>.box a :hover{
             text-decoration: none;color:green;background-color: yellow;
          }
  </code></pre>
  
  <p>and</p>
  
  <pre><code> a :hover box{
             text-decoration: none;color:green;background-color: yellow;
          }
  </code></pre>
  
  <p>and</p>
  
  <pre><code> a box:hover{
             text-decoration: none;color:green;background-color: yellow;
          }
  </code></pre>
  
  <p>etc...</p>