Javascript

Question

我正在尝试在鼠标悬停时将 class 添加到 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 将 class“隐藏”，当用户悬停时，div 应该显示并保持可见，直到用户悬停另一个 div同样 class.

        .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

Answer 1

纯CSS溶液

你需要的是:hoverCSS pseudo class and 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>

Answer 2

您可以向所有具有 container class 的元素添加 mouseenter 事件侦听器，将 hidden class 添加到 div 并将 show class 添加到当前的 div 中。

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>

Answer 3

我喜欢和一个听众一起做这种事情。这里我们检查鼠标是否在 .container p 上，我们将最后一个 hidden div 存储在一个变量中。如果 element 中有内容，我们将 hidden class 添加回来，然后我们从当前兄弟中删除 hidden class 并将其存储在 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 规则。

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

Javascript - add class on hover and keep it until hover on another element

css

display