Hovering over child and parent to trigger change

Question

I'm trying to make an input field with a button and custom sprite image inside of it.

The input should change the border color and show the button with an icon while hovering. Additionally while hovering both input and button, the icon should be changed.

Right now the icon changes with input:focus while dismissing the border of the input.

If somebody can guide me in the right direction, it would be greatly appreciated.

Here's what I came up so far:

HTML

<form class="b-editor-item col-3">
  <input type="text" placeholder="D" class="b-editor-d-input" />
  <button type="button" class="b-editor-button-delete">
       <div class="b-editor-icon-trash"></div>
  </button>
</form>

SCSS

input[type="text"] {
  border: 1px solid transparent;
}

.b-editor {
  &-item {
    display: flex;
    align-items: center;
  }

  &-button-delete {
    border: none;
    height: 24px;
    width: 24px;
    overflow: hidden;
    background-color: transparent;
  }

  &-d-input {
    color: black;
    background-color: #eaeaea;
    border-radius: 6px;
    width: 90%;
    margin-right: -3.25rem;
    height: 2rem;
  }

  &-icon-trash {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1044597/trash.png);
    background-repeat: no-repeat;
    background-position: -28px 0;
    background-size: 300%;
    height: 20px;
    width: 20px;
    padding: 5px 2px;
  }

  &-d-input:hover + &-button-delete:hover > &-icon-trash,
  &-d-input:focus + &-button-delete:hover > &-icon-trash {
    background-position: -52px 0;
  }

  &-d-input + &-button-delete {
    display: none;
  }
  &-d-input:hover + &-button-delete,
  &-d-input:focus + &-button-delete,
  &-d-input:hover + &-button-delete:hover {
    display: block;
  }

  &-d-input:hover,
  &-d-input:hover + &-button-delete:hover {
    border: 1px solid #00c8aa !important;
  }
}

Answer 1

Try to add these 2 rules:

button.b-editor-button-delete:hover {
    display: block;
}

button.b-editor-button-delete:hover .b-editor-icon-trash {
    background-position: -52px 0;
}