时间戳

首页 > 解决方案 > 将鼠标悬停在子级和父级上以触发更改

html - 将鼠标悬停在子级和父级上以触发更改

问题描述

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

输入应更改边框颜色并在悬停时显示带有图标的按钮。此外，同时悬停输入和按钮时，应更改图标。

现在，图标随着 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;
  }
}

标签： htmlcsssasshoverstyling

解决方案

尝试添加以下两条规则：

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

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

推荐阅读