Getting the html element before another on hover

Question

So I am trying to get the element next to an element that I hover over. So if I have:

<div class="parent">
  <div class="thing1"></div>
  <input type="text" class="thing2" />
</div>

When you hover over .thing2 I want thing1 to get a border applied to it. Is this possible? Here is what I have so far but it isn't working...

.thing1:hover ~ .thing2 {
  border: 1px solid #707070;
}

Possible duplicate of [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — skyline3000, Oct 08 '18 at 17:56

Sunny Patel · Answer 1 · 2018-10-08T18:01:25.977

2

You will have to reverse the order of .thing1 and .thing2 to get your desired result. And use positioning CSS to compensate the layout difference. Only then you'll be able to use the .thing2:hover + .thing1 selector.

This is by means of a Pure-CSS solution without any JavaScript performance overhead.

edited Oct 08 '18 at 18:01

answered Oct 08 '18 at 17:52

Sunny Patel

7,830
2
31
46

I thought using the `~` operator was for getting the element that precedes? – Zach Starnes Oct 08 '18 at 17:53
CSS only reads forward, you can't select a parent element, nor a previous element. `~` is for anywhere after, and `+` is immediately after. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators) – Sunny Patel Oct 08 '18 at 17:55
So if i reverse the order how can I use css to get them back in the order I need them? `thing1` has to be before `thing2` – Zach Starnes Oct 08 '18 at 17:56
You can use a number of things, [Flexbox + Order](https://developer.mozilla.org/en-US/docs/Web/CSS/order), [Floats](https://developer.mozilla.org/en-US/docs/Web/CSS/float), and [Absolute/Relative positions](https://developer.mozilla.org/en-US/docs/Web/CSS/position) are some ways. Keep in mind that you may also have to adjust the `z-index` property if there is any overlap. – Sunny Patel Oct 08 '18 at 18:00

CHBresser · Accepted Answer · 2018-10-08T18:04:22.307

If you are not opposed to using Javascript, would recommend using JQuery to accomplish this.

Like so:

 $(document).ready(function() {
  $('.thing2').hover(function() {
    $('.thing1').css('border', '1px solid red');
    $('.thing2').mouseleave(function() {
      $('.thing1').css('border', 'none');
    })
  });
});

edit:

jsfiddle

I also added code to remove the border when the mouse leaves. You can remove the following line if you do not want this behavior.

$('.thing2').mouseleave(function() { $('.thing1').css('border', 'none'); })

score 0 · Answer 3 · answered Oct 08 '18 at 18:04

I think this link will help youSelect specific element before other element

Css doesn't offer a selector which will target before a selector.

What is the solution
You can use jQuery, jQuery provides simple and beautiful methods for selecting.

Common css selectors
https://www.w3schools.com/cssref/css_selectors.asp

score 0 · Answer 4 · answered Oct 08 '18 at 18:05

If jquery is an option you can set a class on thing1 when you hover thing2 by using:

$('.thing2').mouseenter(function() {
    $(this).closest('.thing1').addClass('customBorderClass');
});
$('.thing2').mouseleave(function() {
    $(this).closest('.thing1').removeClass('customBorderClass');
});

Then apply your css in the customBorderClass that gets added/removed on hover:

.customBorderClass {
    border-style: solid;
}

Getting the html element before another on hover

4 Answers4