Javascript - 在悬停时添加类并保持它直到悬停在另一个元素上答案

【问题标题】：Javascript - add class on hover and keep it until hover on another elementJavascript - 在悬停时添加类并保持它直到悬停在另一个元素上
【发布时间】：2021-11-19 04:17:30
【问题描述】：

我正在尝试在悬停时向 div 添加一个类，但我需要它保持活动状态，直到鼠标进入同级。

<div class="container">
    <p>Hover me 1</p>
    <div class="hidden">Somthing 1</div>
</div>
<div class="container">
    <p>Hover me 2</p>
    <div class="hidden">Somthing 2</div>
</div>
<div class="container">
    <p>Hover me 3</p>
    <div class="hidden">Somthing 3</div>
</div>

默认情况下，div 将具有“隐藏”类，当用户悬停时，该 div 应显示并保持可见，直到用户悬停另一个具有相同类的 div。

        .hidden {
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s 9999s, opacity 0.1s linear;
          }
        .show {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
          }

这就是我想要做的事情

document.ready(function() {
    document.getElementByClassName("hidden").mouseenter(function() {
        document.getElementByClassName("show").classList.remove("show").classList.add("hidden");
        this.classList.remove("hidden").classList.add("show");
    });
});

它认为使用 jQuery 更容易，但我需要使用纯 JS

【问题讨论】：

标签： javascript css display

【解决方案1】：

您可以使用container 类将hidden 类添加到每个元素的div 并将show 类添加到div 的所有元素中添加一个mouseenter 事件侦听器当前的。

const containers = document.querySelectorAll('.container');

containers.forEach(f => f.addEventListener('mouseenter', function() {
  containers.forEach(e => {
    var div = e.querySelector('div');
    div.classList.add('hidden');
    div.classList.remove('show');
  })
  this.querySelector('div').classList.add('show')
}))

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 9999s, opacity 0.1s linear;
}

.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <p>Hover me 1</p>
  <div class="hidden">Somthing 1</div>
</div>
<div class="container">
  <p>Hover me 2</p>
  <div class="hidden">Somthing 2</div>
</div>
<div class="container">
  <p>Hover me 3</p>
  <div class="hidden">Somthing 3</div>
</div>

【讨论】：

您应该将 NodeList 转换为 Array，因为 NodeList 并不支持 forEach [...containers].forEach

【解决方案2】：

纯 CSS 解决方案

你需要的是:hoverCSS pseudo class和adjacent sibling selector

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 9999s, opacity 0.1s linear;
}

.container p:hover + div.hidden {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

<div class="container">
    <p>Hover me 1</p>
    <div class="hidden">Somthing 1</div>
</div>
<div class="container">
    <p>Hover me 2</p>
    <div class="hidden">Somthing 2</div>
</div>
<div class="container">
    <p>Hover me 3</p>
    <div class="hidden">Somthing 3</div>
</div>

【讨论】：

这不包括 OP 询问的用例。
我已经更新了答案

【解决方案3】：

我喜欢和一个听众一起做这种事情。这里我们检查鼠标是否在.container p 上，我们将最后一个hidden div 存储在一个变量中。如果element 中有东西，我们将hidden 类添加回来，然后我们从当前兄弟中删除hidden 类并将其存储在element 变量中。

let element;
document.addEventListener('mouseover', e => {
  if (e.target.matches('.container p')) {
    if (element != null) {
      element.classList.add('hidden');
    }
    element = e.target.nextElementSibling;
    element.classList.remove('hidden');
  }
});

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 9999s, opacity 0.1s linear;
}

.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.container p {
  cursor: pointer;
}

<div class="container">
  <p>Hover me 1</p>
  <div class="hidden">Somthing 1</div>
</div>
<div class="container">
  <p>Hover me 2</p>
  <div class="hidden">Somthing 2</div>
</div>
<div class="container">
  <p>Hover me 3</p>
  <div class="hidden">Somthing 3</div>
</div>

我还在p 标签上添加了cursor: pointer css 规则。

【讨论】：