将鼠标悬停在子项和父项上以触发更改

Question

我正在尝试制作一个带有按钮和自定义精灵图像的输入框。

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.

现在图标变为 input:focus，同时消除了输入框的边框。

如果有人能指导我正确的方向，将不胜感激。

这是我到目前为止的结果：

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

尝试添加这 2 条规则：

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

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

将鼠标悬停在子项和父项上以触发更改

Hovering over child and parent to trigger change

html

css

sass

styling

hover