使用jQuery时出现的悬停问题

Question

我有三个产品。页面加载时，显示最后一个活动产品。如果我悬停在其他产品上，则将活动类分配给该产品。

现在我的问题是，

1）当悬停在第一或第二个产品时，必须从第三个产品中删除“新产品”文本；如果在第三个产品上悬停，则再次显示“新产品”。

2）如果我直接悬停在第一个产品上，则不会从第三个产品中移除活动类。

当页面加载时。（这是正确的输出） 当我直接悬停在第一个产品上。（它应该从第三个产品中删除） 请注意，在这里，我悬停在第一个产品上，但第三个产品显示“新产品”文本。我必须将其删除。

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

- user9437856

Answer 1

你可以这样做：当鼠标悬停在产品元素上时，移除所有“product_set_hover”元素的背景并隐藏“new_products”，然后将背景添加到当前元素并显示“new_products”（如果存在）。

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

- Mustapha Larhrouch

---

@Mustapha，请查看 jsfiddle，其中显示了不同的代码和输出。 - user9437856

我已经更改了 Fiddle 链接。 - Mustapha Larhrouch

@MustaphaLarhrouch，是的，你的代码对我来说完美无缺。 - user9437856

Answer 2

你可以这样做，

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>

- Hary

---

这将为所有具有“新产品”标签的产品显示该标签，而不仅仅是悬停的那一个。 - Gerard

@Gerard，那段代码将针对悬停的产品执行，而$(this)仅在活动产品上执行。 - Hary

为第一个产品添加“新产品”div，然后将鼠标悬停在上面。它将出现在产品1和产品3中。 - Gerard

Answer 3

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

试试这个。

- Satrughna

---

给我一些时间检查。 - user9437856

Answer 4

你的代码看起来还不错 - 但是需要一些微调。添加时应该移除类，这是主要的想法。

这里有一个hasClass()函数，你可以检查类是否可用，如果可用，则删除它，这可能会解决你的问题。

同时，当你悬停在盒子上时，需要移除新产品的span标签。

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

- Rahul