最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

I'm trying to add a class to a div on hover but I need it to stay active until mouse enters a sibling.

<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>

By default the div will have the class "hidden" and when the user hovers that div should display and stays visible until the user hover another div with the same class.

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

This is what I'm trying to do

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

It think this is easier to do with jQuery but I need to use pure JS

I'm trying to add a class to a div on hover but I need it to stay active until mouse enters a sibling.

<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>

By default the div will have the class "hidden" and when the user hovers that div should display and stays visible until the user hover another div with the same class.

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

This is what I'm trying to do

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

It think this is easier to do with jQuery but I need to use pure JS

Share Improve this question asked Sep 26, 2021 at 22:25 oreb85oreb85 571 gold badge1 silver badge6 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

Pure CSS solution

What you need is a :hover CSS 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>

You can add a mouseenter event listener to all elements with the container class that adds the hidden class to the div in each one and adds the show class to the div in the current one.

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./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>

I like to do this sort of thing with one listener. Here we check if the mouse is over a .container p, we store the last hidden div in a variable. If there is something in element, we add the hidden class back, then we remove the hidden class from the current sibling and store it in the element variable.

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>

I also added a cursor: pointer css rule on the p tags.

发布评论

评论列表(0)

  1. 暂无评论