如何在悬停时显示背景颜色变化(与扭转)？

Question

我会直截了当地说出来。

我有4个元素(背景-1，背景-2，背景-3，背景-4).

当我第一次到达页面时，我希望背景-1具有“背景颜色：#D8D7D8;”和其他三个“背景色：#FBFBFB;”。然后，每当我悬停另一个背景-x，我希望所有它们都是#FBFBFB，除了一个被悬停，将在#D8D7D8。

我知道这对你来说可能很容易，但对我来说却不是。

我的css看起来如下：

.background-1 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}
.background-2 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}
.background-3 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}
.background-4 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}

下面是它的样子：印古尔

提前谢谢你！

米拉克

Answer 1

假设所有四个元素都是兄弟姐妹，您可以这样做。

对于默认的bg1值，我建议使用一个JavaScript事件处理程序。

​

const divs = document.querySelectorAll('.bg');

function clearBgExcept(target) {
  divs.forEach(div => div.style.backgroundColor = div !== target ? "#FBFBFB" : "#D8D7D8");
}

function clearAllBg() {
  divs.forEach(div => div.style.backgroundColor = div.dataset.default ? "#D8D7D8" : "#F8F8F8" );
}
divs.forEach(el => el.addEventListener('mouseover', e => {
    clearBgExcept(e.target);
  }));
  
divs.forEach(el => el.addEventListener('mouseout', () => {
    clearAllBg();
  }));

.wrapper {
  min-width: 300px;
  min-height: 300px;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.bg {
  background-color: #FBFBFB;
  border: 1px solid #CCC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .3s ease-in-out;
}

.bg[data-default="true"], .bg:hover {
  background-color: #D8D7D8;
}

<div class="wrapper">
  <div class="bg" data-default="true">BG1</div>
  <div class="bg">BG2</div>
  <div class="bg">BG3</div>
  <div class="bg">BG4</div>
</div>

​

Answer 2

假设您的元素是兄弟姐妹，那么就不需要Javascript：

​

.background-1,
.background-2,
.background-3,
.background-4 {
  background-color: #FBFBFB;
  padding: 2em;
}

.background-1 {
  background-color: #D8D7D8;
}

.background-1:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-2:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-3:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-4:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.column:hover .background-1:not(:hover) {
  background-color: #FBFBFB;
}

<div class="column">
  <div class="background-1">
    B1
  </div>
  <div class="background-2">
    B2
  </div>
  <div class="background-3">
    B3
  </div>
  <div class="background-4">
    B4
  </div>
</div>

​

唯一“聪明”的部分是重置background-1颜色时，父元素是悬浮，但background-1没有徘徊。