主页 / 问题 / 953162
Accepted
Дмытрык
Asked:2020-03-06 21:17:08 +0000 UTC2020-03-06 21:17:08 +0000 UTC

将鼠标悬停在另一个元素上时更改元素的样式

  • 772

悬停时需要three更改样式six（使用 CSS）

body {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}

.three {
  width: 20px;
  height: 20px;
  background-color: blue;
}

.six {
  width: 20px;
  height: 20px;
  background-color: yellow;
}
<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>
<div class="four">
  <div class="five">
    <div class="six">
    </div>
  </div>
</div>

谷歌搜索并没有找到任何东西

html

2 个回答

  1. 仅当元素处于同一级别时，您不能使用纯 CSS 执行此操作

    CSS 选择器参考

    body{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}

.three{
  width: 20px;
  height: 20px;
  background-color: blue;
}

.six{
  width: 20px;
  height: 20px;
  background-color: yellow;
}

.one:hover + .four .six{
  background-color: blue;
}
    <div class="one">
  <div class="two">
    <div class="three">
      </div>
    </div>
</div>
<div class="four">
    <div class="five">
      <div class="six">
        </div>
      </div>
  </div>

    使用 jQuery 会是这样的（关联）：

    $(function() {
  $('.three').hover(function() {
    $('.six').css('background-color', 'blue');
  }, function() {
    // on mouseout, reset the background colour
    $('.six').css('background-color', 'yellow');
  });
});
    • 3
  2. Best Answer

    理论上，这是不可能的。

    但是你可能有点棘手。它适用于chrome，我没有在其他人中测试过。

    body {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}

.one, .four {
  outline: 1px dotted red;
}

.three {
  width: 20px;
  height: 20px;
  background-color: blue;
}

.six {
  width: 20px;
  height: 20px;
  background-color: yellow;
}

.one {
  pointer-events: none;
}

.three {
  pointer-events: all;
}

.one:hover ~ .four .six {
  background: red;
}
    <div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>
<div class="four">
  <div class="five">
    <div class="six">
    </div>
  </div>
</div>

    • 2

相关问题