0

I have two containers with text. I want to increase the text size of one of the texts by hovering on the other by only using CSS. The method I saw on a different SO post is not working for me. What is the right way to do this? Thanks in advance.

.top p {
  font-size: 3vw;
}

.bottom p {
  cursor: pointer;
}

.bottom:hover + .top {
  font-size: 6vw;
}
<div class='wrapper'>
  <div class='top'>
    <p>scale</p>
  </div>
  <div class='bottom'>
    <p>hover</p>
  </div>
</div>
seriously
  • 1,202
  • 5
  • 23
  • Just to be sure: is `div.bottom` _always_ immediately after `div.top` ? That is, there will never be anything in between? If so, then you can use `div.top:hover+div.bottom`. – Manngo Jul 05 '22 at 06:06
  • BTW, I think you should use ids instead of classes. The implication is that there will be exactly one of each, rather than maybe some more. – Manngo Jul 05 '22 at 06:07
  • @Manngo that wont work take a look at my comment on the answer below. – seriously Jul 05 '22 at 06:07
  • Ah, you want to go either way. For that, you will need some JavaScript. CSS doesn’t (yet) have a reverse selector. – Manngo Jul 05 '22 at 06:08
  • @Manngo yeah that's what I wanted to know. Thanks. – seriously Jul 05 '22 at 06:09

2 Answers2

2

I have a sample which changes the CSS of the other element.

Unfortunately, the CSS :hover pseudo class, as well as CSS selectors make remote controlling other elements tricky, so you will have to use JavaScript.

In this case, hovering over one div triggers the mouseover event, which is set to add the other class to the other element. Moving the mouse out triggers the mouseout event, which will remove that class.

I have written the JavaScript in four separate parts, but, with more experience, it is possible to be a little more subtle.

To illustrate the point, I simply change the background colour. Obviously, this is where you might do something more meaningful.

document.querySelector('div.top').onmouseover=function(event) {
  document.querySelector('div.bottom').classList.add('other');
}
document.querySelector('div.top').onmouseout=function(event) {
  document.querySelector('div.bottom').classList.remove('other');
}
document.querySelector('div.bottom').onmouseover=function(event) {
  document.querySelector('div.top').classList.add('other');
}
document.querySelector('div.bottom').onmouseout=function(event) {
  document.querySelector('div.top').classList.remove('other');
}
div.other {
  background-color: pink;
}
<div class='wrapper'>
  <div class='top'>
    <p>scale</p>
  </div>
  <div class='bottom'>
    <p>hover</p>
  </div>
</div>
Manngo
  • 14,066
  • 10
  • 88
  • 110
0

.top:hover + .bottom{font-size:30px;}
<div class='wrapper'>
  <div class='top'><p>scale</p></div>
  <div class='bottom'><p>hover</p></div>
</div>
Jaswinder Kaur
  • 1,606
  • 4
  • 15