How can I target previous sibling on hover?

Question

I'm trying to figure out a way to target the previous sibling on hover. In this fiddle, I'd like the Edit button to turn green when you hover over it or the entire wrapper, but when you hover over the Delete button, it turns red and the Edit button returns to normal. Because they are both in the same parent (and necessarily must be) this seems difficult.

I should note I'm working in SASS so maybe there's a conditional way of doing this?

FIDDLE

<div class="wrapper">
  <button class="btn edit">
    Edit
  </button>
  <button class="btn delete">
    Delete
  </button>
</div>

You can't target a previous sibling in CSS, that's an XY problem. Cyber's answer provides a solution... but I'm curious why you want the Edit button to be green when you're hovering the wrapper and not just the Edit button? Also no, there's nothing that Sass can do that CSS can't also do; Sass only exists to save you time in writing CSS. It doesn't add new functionality to CSS. — TylerH, Dec 21 '17 at 20:08
It's in the requirements of a component I'm building. My fiddle is a very simplified version of what I have to build. I'll probably just use flexbox and order, but I was hoping to avoid changing the ReactJS markup because I have to do it in a dozen components for what I'm doing. — Kirk Ross, Dec 21 '17 at 20:16

CyberAP · Accepted Answer · 2017-12-21T20:06:01.370

You can inverse the position of your elements in the markup, then use flexbox with reversed direction. That way you'll be able to target Edit button whilst hovering on Delete.

Alternatively you can just use Order property, but that depends if you want more items there.

https://jsfiddle.net/CyberAP/7pye3e8w/2/

.wrapper {
  border: 1px solid black;
  padding: 40px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.btn {
  -webkit-appearance: none;
  border: 1px solid black;
  margin: 10px;
  outline: none;
  padding: 5px 10px;
  font-size: 18px;
  background-color: #ddd;
}

.wrapper:hover .edit {
  background: green;
  color: white
}

.wrapper .delete:hover {
  background: red;
  color: white
}

.wrapper .delete:hover + .edit {
  background-color: #ddd;
  color: #000;
}

<div class="wrapper">
  <button class="btn delete">
    Delete
  </button>
  <button class="btn edit">
    Edit
  </button>
</div>

How can I target previous sibling on hover?

1 Answers1