CODEWITHSUNDEEP
htmljquerycss
Nightcrawler
Nightcrawler

Reputation: 1051

jQuery select only hovered item, with same class

I am creating simple jQuery Project, but I am in trouble, I can't figure out how I can solve this problem. I've created three boxes, then I hover around these boxes I want box text to appear, yes it's working, but I want to appear only box text which was hovered (mousseentered), now it appears all of them, for example if I hover on first box, I want to only first box text appear, all the boxes have same class name, and it is needed

$('.three_box_inner').mouseenter(function(){
  $('.text').css({
    'display':'block',
  })

})
.three_box{
display:flex;

}

.three_box_inner{
  height:200px;
  width:200px;
  background-color:red;
  margin-left:20px;
}
.text {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class='three_box'>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
    </div>
      <div class='three_box_inner'>
        <div class='text'>
      text
    </div>
    </div>
      <div class='three_box_inner'>
        <div class='text'>
      text
    </div>
    </div>
  <div>

Upvotes: 2

Views: 128

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

There's absolutely no need for JS. All you need is CSS and the :hover pseudo selector.

.three_box_inner:hover .text {
  display: block;
}

Example:

.three_box {
  display: flex;
}

.three_box_inner {
  height: 200px;
  width: 200px;
  background-color: red;
  margin-left: 20px;
}

.text {
  background: gold;
  opacity: 0;
  transition: 0.3s;
}

.three_box_inner:hover .text {
  opacity: 1;
}
<div class='three_box'>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
</div>

If you really want to preserve the visible state:
Notice how the CSS remained almost the same, just instead of :hover you can use a .is-hover and change those classes on the parent element using jQuery's .removeClass() and .addClass()

const $box = $(".three_box_inner");

$box.on("mouseenter", function() {
  $box.not(this).removeClass("is-hover");
  $(this).addClass("is-hover");
});
.three_box {
  display: flex;
}

.three_box_inner {
  height: 200px;
  width: 200px;
  background-color: red;
  margin-left: 20px;
}

.text {
  background: gold;
  opacity: 0;
  transition: 0.3s;
}

.three_box_inner.is-hover .text {
  opacity: 1;
}
<div class='three_box'>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

Use find() or children and toggle() inside hover() which is triigered by both mouseenter and mouseleave

$('.three_box_inner').hover(function() {
  $(this).find('.text').toggle()
})
.three_box {
  display: flex;
}

.three_box_inner {
  height: 200px;
  width: 200px;
  background-color: red;
  margin-left: 20px;
}

.text {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class='three_box'>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div>

Upvotes: 2

Related Questions