主页 / 问题 / 1347855
Accepted
stiv
Asked:2022-04-10 00:01:04 +0000 UTC2022-04-10 00:01:04 +0000 UTC

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

  • 772

可以用css做到这一点吗？将鼠标悬停在其中一个元素上时：text2、text3、text4、text1 将颜色更改为“小麦”

.list {
  display: flex;
}

.item {
  margin-right: 15px;
  padding: 10px;
  background: wheat;
}

.item:first-child {
  background: #ccc;
}

.item:hover {
  background: #ccc;
}
<div class="list">
  <div class="item">text1</div>
  <div class="item">text2</div>
  <div class="item">text3</div>
  <div class="item">text4</div>
</div>

html

2 个回答

  1. Best Answer

    从视觉上看，如果您以相反的顺序排列 DOM 中的元素并应用，则可以做到这一点flex-direction: row-reverse

    .list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

.item {
  margin-right: 15px;
  padding: 10px;
  background: wheat;
}

.item:last-child {
  background: #ccc;
}
.item:hover ~ .item:last-child {
  background: wheat;
}
    <div class="list">
  <div class="item">text4</div>
  <div class="item">text3</div>
  <div class="item">text2</div>
  <div class="item">text1</div>
</div>

    • 1

  2. 你想要的 CSS 是不可能的，但是这个任务可以使用 JS 来解决。不需要包含文件style.js，把代码写在标签里面<script></script>

    let sensors = document.querySelectorAll('.sens');
sensors.forEach((element) => {
    addRemoveClass(element);
});
let changeables = document.querySelectorAll('.changeable');

function addRemoveClass(element) {
    element.addEventListener('mouseover', (event) => {
        changeables.forEach((element) => {
            element.classList.add("hover-styles");
        })
    });

    element.addEventListener('mouseout', (event) => {
        changeables.forEach((element) => {
            element.classList.remove("hover-styles");
        })
    });
};
    .list {
  display: flex;
}

.item {
  margin-right: 15px;
  padding: 10px;
  background: wheat;
}

.item:first-child {
  background: #ccc;
}

.item:hover {
  background: #ccc;
}

/*отслеживается наведение на элементы с этим классом*/
.sens {

}
/*метка ИЗМЕНЯЕМЫХ элементов*/
.changeable {
              
}

/*новые стили для элементов с классом "changeable"*/
.hover-styles {                     
    transition: all 0.1s linear;
    background: wheat !important;   /*указать "!important" если стили конфликтуют и не работают*/
}
          <div class="list">
         <div class="item changeable">text1</div>
         <div class="item sens">text2</div>
         <div class="item sens">text3</div>
         <div class="item sens">text4</div>
      </div>

    • 1

相关问题