Is there a way to work backwards using CSS

Question

I want to know if there is a way to work backwards in CSS. What I mean is say I have a border around a div tag and then inside that div tag is a link that has a hover function. Is there a way to change the border color on the div tag when that link is hovered or is this only achievable using jquery?

Technically, you are hovering over the div if you are hovering over the link... — cimmanon, Apr 22 '13 at 19:39
But you are not always hovering over the link if hovering over the div.. — Dan, Apr 22 '13 at 19:41
Yes the div changes colors as I hover over it and then inside is a link. I want that div to change colors as the link is hovered. — Anthony Russo, Apr 22 '13 at 19:42

score 1 · Answer 1 · answered Apr 22 '13 at 19:37

That will be possible when the next CSS selectors specification is ready and implemented by the browsers. Then it will be possible to write something like:

!div a:hover { border-color: red; }

The current working draft proposal is here: http://www.w3.org/TR/2012/WD-selectors4-20120823/#subject

score 0 · Answer 2 · answered Apr 22 '13 at 19:29

0

You can make the whole div hoverable:

.outer-class:hover {
  border-color: some-color;
}

Whereas outer-class is the class of the div.

answered Apr 22 '13 at 19:29

Femaref

60,705
7
138
176

score 0 · Answer 3 · answered Apr 22 '13 at 19:30

The answer to your question is: No, there is no such way. Using jQuery to achive that is overkill yet and I would not recommend that. Instead refactor your markup and remember that you can access pseudo classes (:hover) not only for links (the days we support IE6 are definetly over, and even IE7 supports :hover on arbitrary elements iirc), so you could simply do:

div:hover {
    border-color:green;
}

score 0 · Answer 4 · answered Apr 22 '13 at 19:31

Kind of possible. Here is an example: http://jsfiddle.net/hL3Ta/

<div>
    <a href="#">Some link</a>
</div>

..

div {
    display: inline-block;
    border:5px solid black;
}
div:hover {
    border: 5px solid red;
}

a {
    display: inline-block;
    width: 100px;
    height: 100px;
}

As mentioned in other answers, the nature of the block model doesn't currently allow for selectors to operate in reverse. The pure CSS workaround is to use the pseudo-elements on containers that have the dimensions as your nested target.

Is there a way to work backwards using CSS

4 Answers4