jquery - 使用 jQuery 的悬停问题

Question

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

现在我的问题是，

1) 当悬停在一个或两个产品上时，我必须从第三个产品中删除 New product 文本，如果悬停在第三个产品上然后再次显示 New Product .

2) 如果我直接将鼠标悬停在第一个产品上，那么事件类不会从第三个产品中移除。

当我的页面加载时。(这是正确的输出)

当我直接将鼠标悬停在产品一上时。 (它应该从产品中删除第三)

请注意，我将鼠标悬停在产品一上，但产品三显示的是 New Product 文本。我必须删除它。

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

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/