Question

I’m trying to get a div that when hovered shows a hidden h2 + P (using CSS), and i want the entire div (including h2 + p) to be linkable to X.

The only way so far i’ve managed to make it work is by making the A wrap everything, but this is of course only HTML5 valid, so some browsers (IE) will not like it.

<a href="#">
 <div class="one">
    <img src="#">
    <p>one</p>
 </div>
</a>

I also can’t give each block a separate <a> as I want to change the color on hover, so the whole div needs to be hoverable. And even if i went that way, surely giving a post excerpt (the <P>) would surely be bad for seo?

Essentially this is what I want the final result to be:

<div class="one">
<img src"#">
<p>test</p>
<a href="#" class="special"></a>
</div>

and on one:hover, to have the entire div be a link (href=”#”).

There must be a way to do this!

Answer 1

Wrap both the link and content within a DIV:

<div class="wrapper">
  <a href="#"></a>
  <div class="one">
     <img src="#">
     <p>one</p>
  </div>
</div>

Make it relative, and then put a transparent link on top that spans across the entire content area:

.wrapper a{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: transparent;
}

.wrapper a:hover{
  border: 1px solid #d33;  
}

.wrapper{
  position: relative;
  border: 1px solid #ccc;
}

Kind of ugly, but I don’t see any other alternatives without js 🙂