Hover issue using jQuery

Question

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)

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

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

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

Mustapha Larhrouch · Accepted Answer · 2018-10-31 11:46:28Z

2

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/

edited Oct 31, 2018 at 11:46

answered Oct 31, 2018 at 11:15

Mustapha Larhrouch

3,4053 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user9437856 Over a year ago

@Mustapha, Please check the jsfiddle showing the different code and output

Mustapha Larhrouch Over a year ago

I changed the fiddle link

user9437856 Over a year ago

@MustaphaLarhrouch, Yes, your code is working perfectly for me.

Hary · Accepted Answer · 2018-10-31 11:29:42Z

1

You can do it this way,

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();

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>

edited Oct 31, 2018 at 11:29

answered Oct 31, 2018 at 11:15

Hary

5,8368 gold badges49 silver badges91 bronze badges

3 Comments

Gerard Over a year ago

This will show the "new products" label for all products that have one. Not just for the one that is hovered.

Hary Over a year ago

@Gerard, That piece of code will execute against the hovered product and $(this) will get executed only on the active product

Gerard Over a year ago

Add the "new products" div for the first product and then hover it. It will appear for product 1 and product 3.

Satrughna · Accepted Answer · 2018-10-31 11:16:15Z

0

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

Try this.

answered Oct 31, 2018 at 11:16

Satrughna

933 silver badges14 bronze badges

1 Comment

user9437856 Over a year ago

Give me time to check.

Rahul · Accepted Answer · 2018-10-31 11:28:22Z

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

Collectives™ on Stack Overflow

Hover issue using jQuery

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related