Change the text content of the first div when hovering over a second div

Question

I have 2 divs - I want the text of the first div to change when I hover over the second div.

My rule below seems to have no effect:

.ico-b:hover ~ .lab-marker::before {content: "Option -";}

Any ideas would be much appreciated.

.lab-marker {
height: 22px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
width: 12px;
margin: auto;
margin-bottom: 20px;
font-size: 14px;
opacity: 0.5;
font-weight: 400;
background-color: pink;
}

.ico-b { padding: 20px; background-color: yellow; }

.ico-b:hover ~ .lab-marker::before {content: "Option -";}

<div>
<div class="lab-marker">A</div>
<div class="ico-b">Hover over me</div>
</div>

No, of course this doesn’t work. `X ~ Y` selects a `Y` element, that is a sibling _following_ `X` - which you don’t have here, your situation is the exact opposite. There is no way to select in that direction in current CSS. You could however use flexbox and its `order` property, to change the order in which these elements get _displayed_, that would allow you to bring them in the correct order _in the DOM_, for this kind of selector to work. — CBroe, Jun 12 '20 at 13:24
I woldn'd advise setting real content through CSS. I would rather use two ``s inside the `
` and alternatively show/hide them through css. — bitifet, Jun 12 '20 at 13:38

score 0 · Answer 1 · answered Jun 12 '20 at 13:34

You can't get a previous sibling, but you can reverse order

So that works:

.reverse-it {
     display:flex;
     flex-direction:column-reverse;
}
.lab-marker {
height: 22px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
min-width: 12px;
margin: auto;
margin-bottom: 20px;
font-size: 14px;
opacity: 0.5;
font-weight: 400;
background-color: pink;
}

.ico-b { padding: 20px; background-color: yellow; }
.ico-b:hover ~ .lab-marker::before {font-size:16px;content: "Option -";}
.ico-b:hover ~ .lab-marker {font-size:0;background-color:green;}

<div class="reverse-it">    
<div class="ico-b">Hover over me</div>
<div class="lab-marker">A</div>
</div>

score 0 · Answer 2 · answered Jun 12 '20 at 13:41

You could do something like this.

jQuery

$(document).ready(function() {
  $('.ico-b').hover(function() {
  // it's a good idea create the parent div with a class or idt
    $(this).parent('div').find('.lab-marker').text('New text');
  }, function() {
    // something when not hover
  });
});

Change the text content of the first div when hovering over a second div

2 Answers2