jQuery select only hovered item, with same class

Question

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

user_1175966 · Answer

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

user_383904 · Answer

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

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

jQuery select only hovered item, with same class

2 Answers