1

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!

user1945912
  • 597
  • 3
  • 9
  • 19
  • the css I used for the above example works fine. It's that I want to change the structure of it so that the A link is inside all div's. But with similar effects, is it possible with pure css? To have `

    test

    ` and make the entire div a link on hover?     – user1945912 Jan 22 '13 at 22:12
  • You need the A wrapper to make the entire thing linkable, period. – Diodeus - James MacFarlane Jan 22 '13 at 22:14
  • But this isn't valid html (only valid HTML5). Are you positive it is impossible? – user1945912 Jan 22 '13 at 22:16
  • 1
    Yes, without JS, this is impossible. Valid is not the be-all-end-all of HTML. This is a long-running argument. See: http://stackoverflow.com/questions/746531/is-it-wrong-to-change-a-block-element-to-inline-with-css-if-it-contains-another – Diodeus - James MacFarlane Jan 22 '13 at 22:22

1 Answers1

0

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 :)

nice ass
  • 16,471
  • 7
  • 50
  • 89
  • I think this might work, but you're right, it is a bit ugly :). I may just give in to js. I was avoiding it because I'm new to js, is it easier/prettier than this way? – user1945912 Jan 22 '13 at 22:49
  • I wouldn't say it's prettier with JS. Generally you should not linkify entire blocks of content like this one. People don't like to see a new browser tab open up when they click something that doesn't look like a link :) – nice ass Jan 22 '13 at 23:00