CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YourPalNurav
YourPalNurav

Reputation: 1320

Selecting only element currently being hovered with jquery and toggle visibility of next element?

I have a div with class .MathBox the very next element is .ypnLeftRight Whenever user hovers on .MathBox, .ypnLeftRight visibility toggles. This works perfectly when there is a single .MathBox element but when there are many such elements jquery selects all the elements with the class .Mathbox and all .ypnLeftRight elements toggle simulteneously.

How to toggle just the div with class .ypnLeftRight present right after the currently hovering .MathBox element?

$('.MathBox').after('<div class="ypnLeftRight"><div class="left-button">&laquo;</div><div class="right-button">&raquo;</div></div>');

$('.right-button').click(function() {
  event.preventDefault();
  $('.MathBox').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

$('.left-button').click(function() {
  event.preventDefault();
  $('.MathBox').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

$('.MathBox , .ypnLeftRight').hover(function() {
  $('.ypnLeftRight').show();
}, function() {
  $('.ypnLeftRight').hide();
});
/*
  $('.MathBox , .ypnLeftRight').hover(function(){
    $(this).find('.ypnLeftRight').show();
  }, function(){
    $(this).find('.ypnLeftRight').hide();
  });*/
.MathBox {
  width: 100%;
  border: dashed 1px #dddddd;
  overflow: auto;
  padding: 0 1em;
  box-sizing: border-box;
}

.ypnLeftRight {
  display: grid;
  grid-template-columns: 50% 50%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  height: 1.5em
}

.ypnLeftRight>div:hover {
  background: rgba(0, 0, 0, 0.8);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="postContentItem">
  1<br/>
  <div class="MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>text{This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
  222<br/> 222
  <br/>1<br/>
  <div class="MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
  222<br/> 222
  <br/>
</div>

I have tried the following but it doesn't seem to work.

$('.MathBox , .ypnLeftRight').hover(function(){
  $(this).find('.ypnLeftRight').show();
}, function(){
  $(this).find('.ypnLeftRight').hide();
});

Upvotes: 0

Views: 35

Answers (1)

Nawed Khan
Nawed Khan

Reputation: 4391

Since ypnLeftRight is always hidden you do not need a hover on it. The hover applies only on .MathBox. Secondly... you need to target the .next() of hovered over .MathBox like this:

$('.MathBox').hover(function(){
  $(this).next('.ypnLeftRight').show();
}, function(){
  $(this).next('.ypnLeftRight').hide();
});

The intent of the OP is to use buttons inside .ypnLeftRight while hovering .MathBox. The code above fails to do so because the DIV are not enclosed together in a parent div. Below is the code that serves the OP's purpose.

Enclose the .MathBox div in a div

<div class="MathBoxParent">
  <div class="MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>text{This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
</div>

Then use following code

$('.MathBoxParent').hover(function(){
  $(this).find('.ypnLeftRight').show();
}, function(){
  $(this).find('.ypnLeftRight').hide();
});

Upvotes: 1

Related Questions