Change the text color of child div one mouse over

Question

I need to change the color of the text which is not the immediate element of the target element.

It is the child of another parent div. How do I target an outer element through css?

In the demo you can see another text' color changes on mouse over ofdiv1 span, likewise I want to change the color of div2 span

In my code, how can I target the div2's span (not the the div2 coz there will be many other elements inside div 2)?

PS - Need to target a child element of another parent from another parent element's child element.

HTML

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
  Another text
  </div>
</div>

<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>

Demo

Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — CBroe, Jun 14 '17 at 07:35

Daniel · Accepted Answer · 2017-06-14T07:37:48.650

1

If you only want to use CSS, you have to assign the :hover to .div1 in order to select .div2 in your hover (as you can not select a parent in CSS):

.div1:hover .another_txt {
    color: red;
 }
  
.div1:hover + .div2 span{
    color: red;
 }

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
  Another text
  </div>
</div>

<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>

edited Jun 14 '17 at 07:37

answered Jun 14 '17 at 07:36

Daniel

525
3
10

Need to target the child element div1 span to div 2 span – user6725932 Jun 14 '17 at 07:37
There is no CSS Parent selector in either CSS2.1 (https://www.w3.org/TR/CSS2/selector.html#pattern-matching) or CSS3 (https://www.w3.org/TR/css3-selectors/#selectors). You'll have to use JS in order to select a parent element. – Daniel Jun 14 '17 at 07:39

Thomas James Tiam-Lee · Answer 2 · 2017-06-14T07:42:33.493

0

You can use JavaScript / JQuery for this. To my knowledge you cannot achieve it in CSS.

HTML:

<div class="div1">
  <span id="hover">hover me</span>
  <div class="another_txt">
  Another text
  </div>
</div>

<div class="div2">
<span id="target">How to change this text color on div1 span hover?</span>
</div>

JS:

$(document).ready(function() {
    $("#hover").hover(function() {
       $("#target").css("color", "red");
  })
})

Here is the live demo: https://jsfiddle.net/vf8ab8yh/1/

edited Jun 14 '17 at 07:42

answered Jun 14 '17 at 07:34

Thomas James Tiam-Lee

691
3
9

Dude, he never wanted to achieve through JS. – haMzox Jun 14 '17 at 07:36
Looking for pure CSS solution – user6725932 Jun 14 '17 at 07:36

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

The best you can do is to wrap the span in another wrapper (you can also not wrap it,your choice) then use the ~ selector.

The use of ~ is to select all the second element (.div2) preceded by the first element (.newDiv). You can read more from here.

The element1~element2 selector matches occurrences of element2 that are preceded by element1.

Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.

.newDiv:hover~.div2>span {
  color: pink;
}

<div class="newDiv"><span>hover me</span></div>
<div class="div1">
  <div class="another_txt">
    Another text
  </div>
</div>

<div class="div2">
  <span>How to change this text color on div1 span hover?</span>
</div>

score 0 · Answer 4 · answered Jun 14 '17 at 07:45

To target the span in the div2 when div1is hovered use the following CSS selector:

.div1:hover+.div2 span{
  color: pink;
}

Demo:

.div1:hover+.div2 span{
  color: pink;
}

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
    Another text
  </div>
</div>
<div class="div2">
  <span>How to change this text color on div1 span hover?</span>
  <div>Don't change this</div>
</div>

score 0 · Answer 5 · answered Jun 14 '17 at 08:13

The element1~element2 selector matches occurrences of element2 that are preceded by element1.

Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.

css selectors

.div1:hover~.div2 {
  color: red
}

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
    Another text
  </div>
</div>
<div class="div2">
  <span>How to change this text color on div1 span hover?</span>
</div>

Change the text color of child div one mouse over

5 Answers5