3

Code explains better than words

<div class="parent">
  <span class="child"></span>
</div>
<div class="outside"></div>

What I want to do

.child:hover ? .outside { }

where ? is the selector I'm looking for

Nikson K John
  • 455
  • 5
  • 13
boop
  • 7,413
  • 13
  • 50
  • 94
  • No, not when `.child:hover`. You can select `.outside` on `.parent:hover` though. And if your `.child` covers the entire space of the parent (which I doubt because it is a `span`) then `.child:hover` will effectively be equivalent to `.parent:hover`. – Harry Nov 25 '15 at 05:03
  • I doubt it. CSS selectors don't usually work in a way that would require traversing the DOM outwards (hence the previous sibling selector having bad support). – Marty Nov 25 '15 at 05:03
  • 1
    Selectors express structural relationships between elements. There is no conceivable relationship that can be expressed here using a single combinator (besides, perhaps, `.child:hover` *existing* somewhere in the document tree). – BoltClock Nov 25 '15 at 05:05
  • lets have a look to this http://www.w3.org/TR/css3-selectors/#selectors – goupil Nov 25 '15 at 05:06
  • @BoltClock that sounds more like an answer than a comment ;) – boop Nov 25 '15 at 05:07
  • Also: http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling ; http://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit ; http://stackoverflow.com/questions/10483323/use-hover-to-modify-the-css-of-another-class – Anthony Nov 25 '15 at 05:07
  • This looks like it can be *kind-a* done via `:target` pseudo-class. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors – Anthony Nov 25 '15 at 05:15

3 Answers3

5

Selectors express structural relationships between elements. When you ask for a selector for an element that is "outside" another element, you're looking for a combinator that says "this element appears outside the containing scope of this other element".

There is no such combinator.

You could conceivably select specifically the .outside sibling of .parent, but then you run into another problem that there is no parent selector for matching .parent relative to .child:hover like there is for matching .child:hover relative to .parent (that is, .parent > .child:hover).

See also: How do I select an element based on the state of another element in the page with CSS?

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
4

The easiest way would to be to make the .parent class the element needed to hover over.

Then you could do

.parent:hover ~ .outside {

}
Kieran Hunter
  • 121
  • 8
4

With the following html structure:

<div class="parent">
<span class="child"></span>
</div>

<div class="outside"></div>

since there is no reliable parent selector in CSS, you can select .outside only in 5 ways:

  1. Directly.
  2. If it is a sibling of .parent.
  3. If it is a child of .parent.
  4. If it is a sibling of .child.
  5. If it is a child of .child.

Since .outside is neither a sibling nor a child of .child, nor is it a child of .parent, your only remaining relationship via which to select .outside is as a sibling of .parent.

This isn't really what you want, if you only want the presentation of .outside to change only when you hover over .child.

I'm no fan of using javascript to influence presentation when CSS can already handle the task, but in this case, CSS cannot handle the task and the javascript is elementary:

var child = document.getElementsByClassName('child')[0];
var outside = document.getElementsByClassName('outside')[0];

function childHover() {
outside.classList.toggle('childhover');
}

function initialiseChildHover() {
child.addEventListener('mouseover',childHover,false);
child.addEventListener('mouseout',childHover,false);
}

window.addEventListener('load',initialiseChildHover,false);
.parent {
display: inline-block;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 1);
}

.child {
display: inline-block; 
width: 100px;
height: 100px;
margin: 50px;
background-color: rgba(255, 255, 0, 1);
}

.outside {
display: inline-block;
width: 150px;
height: 150px;
background-color: rgba(0, 255, 0, 1);
}

.outside.childhover {
background-color: rgba(0, 0, 255, 1);
}
<div class="parent">
<span class="child"></span>
</div>
    
<div class="outside"></div>
Rounin
  • 27,134
  • 9
  • 83
  • 108