ansaurus

Question

"Div hover" is working but not valid (yet)

Answer 1

A:

Try putting the <a> tag inside the div, and css'ing it with:

display: block;
width: 100%;
height: 100%

This should do the trick.

Júlio Santos 2010-10-11 16:55:02

The hover effect is than gone, so that's not working. But thanks for trying to help.

jerry 2010-10-11 17:00:10

It does work if you put the `:hover` on the link instead. I have done this for a menu with block `a` tags in `li` tags - I have a nice hover colour change effect working.

ClarkeyBoy 2010-10-11 17:03:42

Well then remove the `<a>` tag, and use `onmouseover` on the `<div>` tags to trigger jQuery's `toggle()` method.

Júlio Santos 2010-10-11 17:04:08

@ClarkeyBoy I don't think that IE supports `:hover` on anything other that `<a>` tags. At least not all versions do.

Júlio Santos 2010-10-11 17:05:13

@Julio Santos: If you reread my comment I said to put :hover on the **link** instead of the div. This would work with all versions of IE.

ClarkeyBoy 2010-10-11 17:06:49

@ClarkeyBoy Oh wow, you're right. My apologies.

Júlio Santos 2010-10-11 17:08:27

hmm having just read the question properly, and having looked at the script, I dont think it is possible to do this in **just** html and CSS. It may be possible with CSS3 - but if you want it to be cross-browser then that wont work yet. I recommend you either stick with W3 invalid, or that you use jQuery to achieve this effect on link hover. Either way you are not going to be able to satisfy all your requirements.

ClarkeyBoy 2010-10-11 17:11:46

@Julio: No worries - even the best of us make mistakes now and then.

ClarkeyBoy 2010-10-11 17:12:34

Answer 2

+1 A:

To get this to work in IE6, you will have to keep the :hover pseudoclass on the <a> tag. In IE7+, Firefox, Chrome, Safari, and I believe Opera, you can place :hover on any tag, and in that case, I would suggest you change the <a> tag to a <div> tag.

To make it W3C compliant for IE6 functionality, change your <div> tags to <span> tags and put display:block; on the <span> tags and the <a> tag. That way the functionality should not change and you should become W3C compliant, at least within that section.

Jeff Rupert 2010-10-11 17:10:58

Agreed - but the `a` tags would have to have an absolute height. Or maybe have `div` tags which set the height, then `a` tags with `display: block;` and width / height 100%.

ClarkeyBoy 2010-10-11 17:15:57

If i just change the <div> into <span> i get this: http://www.verkopervinden.nl/test6.html and the validator than complaines about <h1> and <p>

jerry 2010-10-11 17:20:44

@ClarkeyBoy: It shouldn't need an absolute height as long as the new span tags have a height and width set as well as being defined as block elements. In effect, it should do the exact same thing as it is now, as a `span` element is `display:inline` while a `div` is `display:block`.

Jeff Rupert 2010-10-11 17:40:49

@jerry: Make sure you set your spans to `display:block` as well. That should alleviate the issues with it not displaying correctly. Do you have to use `h1` and `p`? If so, you'll have to go with a javascript implementation rather than a CSS implementation.

Jeff Rupert 2010-10-11 17:42:19

I suggest, instead of `h1` and `p`, you use `<span class="h1|paragraph">...</span>` and then set the properties for those classes instead. That would work - and @Jeff Rupert I dont see why anyone would **have** to use particular elements. This technique has never failed me on the occasions I have needed to use it.

ClarkeyBoy 2010-10-11 17:46:27

@Jeff and ClarkeyBoy really thanks a lot, for now this does the trick.

jerry 2010-10-11 17:58:12

@jerry: No problem - glad to help.

ClarkeyBoy 2010-10-11 18:29:24

@ClarkeyBoy: At least in the case of `h1`, there is some SEO benefit that wouldn't exist with the `span` tag. That's the only reason of which I can think that would cause such a requirement. Otherwise, yes, you're 100% correct. @jerry: You're welcome! Glad it was useful to you. =)

Jeff Rupert 2010-10-11 18:31:46

ansaurus

tags:

views:

answers:

"Div hover" is working but not valid (yet)

related questions