主页 / 问题 / 1076300
Accepted
Denis
Asked:2020-01-30 22:32:11 +0000 UTC2020-01-30 22:32:11 +0000 UTC

悬停在另一个元素上时设置一个元素的样式

  • 772

如果您使用 :hover 伪元素并将样式应用于特定元素，那么这些样式将应用于它。但是如何确保将鼠标悬停在元素上时设置的样式应用于另一个元素？

css

1 个回答

  1. Best Answer

    问题的解决方案取决于标记中块的相对位置。

    1. 目标元素在同一级别，并且必须在触发元素之后：

    .wrapper {
  display: flex;
}

.trigger,
.target {
  width: 50px;
  height: 50px;
}

.trigger {
  background-color: royalblue;
  margin-right: 16px;
}

.trigger:hover + .target {
  background-color: tomato;
}
    <div class="wrapper">
  <div class="trigger"></div>
  <div class="target"></div>
</div>

    1. 目标元素是触发元素的子元素：

    .wrapper {
  display: flex;
}

.trigger {
  width: 50px;
  height: 50px;
}

.trigger {
  background-color: royalblue;
  margin-right: 16px;
}

.trigger:hover .target {
  width: 25px;
  height: 25px;
  background-color: tomato;
}
    <div class="wrapper">
  <div class="trigger">
    <div class="target"></div>
  </div>
  
</div>

    1. 否则，使用 JavaScript：

    let trigger = document.querySelector(".trigger");
let target = document.querySelector(".target");

trigger.addEventListener("mouseover", function() {
  target.classList.add("active")
});

trigger.addEventListener("mouseleave", function() {
  target.classList.remove("active")
});
    .wrapper {
  display: flex;
}

.trigger,
.target {
  width: 50px;
  height: 50px;
}

.trigger {
  background-color: royalblue;
  margin-left: 16px;
}

.target.active {
  background-color: tomato;
}
    <div class="wrapper">
  <div class="target"></div>
  <div class="trigger"></div>
</div>

    • 1

相关问题