Hover issue using jQuery

user_9437856 0
Viewed 85

I have three products. I am displaying the last product active on page load. If I hover on other product then the active class will assign to the product.

Now My issue is,

1) I have to remove the New product text from the third product when hovering on the one or two product if hover on the third then displays the New Product again.

2) If I directly hover on the first product then active class not removing from the third product.

When my page load.(It's correct output) enter image description here

When I directly hover on product one. (It should remove from the product third) enter image description here

Notice here, I hover on product one but product three is showing New Product text. I have to remove that. enter image description here

$(function() {
  $('.products.onloadhover').addClass('product_set_hover');
});
$(".products").hover(
  function() {
    $(this).addClass("product_set_hover");
  },
  function() {
    $(this).removeClass("product_set_hover");
  }
);
.products {
  border: 1px solid #000;
  min-height: 250px;
}

.products h2 {
  font-size: 20px;
  color: #fff;
}

.new_products {
  background-color: #fbc60e;
  display: inline-block;
  padding: 10px;
  text-align: center;
}

.new_products span {
  font-size: 16px;
  color: #000;
}

.product_set_hover {
  box-shadow: 0 0 14px rgba(0, 0, 0, .1);
  background-color: #d76223;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products">
      <h2>Products1</h2>
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products">
      <h2>Products1</h2>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products onloadhover">
      <div class="new_products"><span>New products</span></div>
      <h2>Products1</h2>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

css html jquery
4 Answers

you can do it like this : when a product elementt is hover remove background from all "product_set_hover" elements and hide "new_products" and then add the background to the current element and show "new_products" if exist

$(function() {
  $('.products.onloadhover').addClass('product_set_hover');
});
$(".products").hover(
  function() {
    $(".product_set_hover").removeClass("product_set_hover");
    $(".new_products").hide();
    $(this).addClass("product_set_hover");
    $(this).find(".new_products").show();
  }
);
.products {
  border: 1px solid #000;
  min-height: 250px;
}

.products h2 {
  font-size: 20px;
  color: #fff;
}

.new_products {
  background-color: #fbc60e;
  display: inline-block;
  padding: 10px;
  text-align: center;
}

.new_products span {
  font-size: 16px;
  color: #000;
}

.product_set_hover {
  box-shadow: 0 0 14px rgba(0, 0, 0, .1);
  background-color: #d76223;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products">
      <h2>Products1</h2>
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products">
      <h2>Products1</h2>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products onloadhover">
      <div class="new_products"><span>New products</span></div>
      <h2>Products1</h2>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

https://jsfiddle.net/bcv9prj6/

user_67039250

You can do it this way,

  1. Hide new_products explicitly and show if active Products div has class new_product.

    $("div.new_products").hide();
$("div.product_set_hover div.new_products").show();

  2. Remove product_set_hover explicitly, which will remove the last active and then assign it back to the active Products div.

    $("div.product_set_hover").removeClass("product_set_hover");
$(this).addClass("product_set_hover");


$(function() {
  $('.products.onloadhover').addClass('product_set_hover');
});
$(".products").hover(
function(){
   
   $("div.product_set_hover").removeClass("product_set_hover");
   $(this).addClass("product_set_hover");
   
   $("div.new_products").hide();
   $("div.product_set_hover div.new_products").show();
   
 }
);
.products {
  border: 1px solid #000;
  min-height: 100px;
  width: 100px;
}

.products h2 {
  font-size: 5px;
  color: #fff;
}

.new_products {
  background-color: #fbc60e;
  display: inline-block;
  padding: 10px;
  text-align: center;
}

.new_products span {
  font-size: 15px;
  color: #000;
}

.product_set_hover {
  box-shadow: 0 0 14px rgba(0, 0, 0, .1);
  background-color: #d76223;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products">
      <h2>Products1</h2>
    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products">
    <div class="new_products"><span>New products</span></div>
      <h2>Products1</h2>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="products onloadhover">
      <div class="new_products"><span>New products</span></div>
      <h2>Products1</h2>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

user_7993420 
$(".products").hover(
  function() {
    $('.products').removeClass("product_set_hover");
    $(this).addClass("product_set_hover");
  },
);

Try this.

user_21811080

Your code seems to be good - but it needs some tweaks. You need to remove the class when added that's the main idea

Here comes the hasClass() function where you can check whether the class is available or not if so remove it that might solve your problem

And you need to remove the span of new products whenever you hover the boxes 

    $(function() {
          $(".products").hover(
            function() {
                 $(".new_products").hide();
                 if($(this).hasClass("product_set_hover")){
                      $(this).removeClass("product_set_hover");
                  }
                  else{
                   $(this).addClass("product_set_hover");
                  }
            });
        });
user_83986300
Related