Forum Moderators: not2easy

Message Too Old, No Replies

":hover" all elements, special case

Syle only hovered element, not container ancestors

         

Xapti

9:26 pm on Mar 18, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I am wondering how to code CSS for a special situation.
This situation is to have all element's formatting changed when hovered, with one exception. While *:hover doesn't work for some reason (which is understandable), one could just type all the tags used individually.

The challenge though, is the following:
I want just the hovered element to be styled, but none of the ancestors containing it to be styled.
An example is to mouse over an image inside a div, and just have the image styled, not both the div, image, and whatever else may be containing them, to be styled.

As far as I can tell, with CSS2.1, or even CSS3, this just isn't possible. Am I correct?
I have an extension called "Colorzilla" for FireFox, which can do this exact thing, though... granted that's in in a different language than just CSS, AFAIK :¦

I'm also wondering something else on the side, that could probably also be answered here instead of making a new topic. It relates somewhat to CSS, but also Javascript, since I am styling CSS attributes using IE's "expression" feature (IE stylesheet):

the following page mentions the values to use for inner window (viewable section of page) size: [howtocreate.co.uk...]

What are the values for IE7? does it support window.innerHeight?

alias

7:48 am on Mar 19, 2007 (gmt 0)

10+ Year Member



you cannot :hover anything, well, not with IE6.
the best solution for you would be to use jQuery or something alike. then all you had to do is type in this in the <script>:

$("*").hover.addClass("hover");

I don't know a solution that would work better for you.

Xapti

9:51 pm on Mar 19, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm not worried about IE. I know that, and I also know IE is garbage in everything else. For IE I should be able to use the hover:whatever code, to enable hovering of other elements.

The problem is not just with hovering whatever. Many browsers can already do this. I want to ensure that if you set a ":hover" for all elements, that if nested, the whole containers around it won't trigger.

Is the answer you gave me something which can do that?
I am not familiar with Jquery's functions... but it doesn't look like that's what it does.