Question

我有三种产品。我正在显示页面加载中活动的最后一个产品。如果我将鼠标悬停在其他产品上，则活动的课程将分配给该产品。

现在我的问题是，

1）如果将鼠标悬停在一个或两个产品上，则必须从第三个产品中删除New product文本，如果将鼠标悬停在第三个产品上，然后再次显示New Product。

2）如果我直接将鼠标悬停在第一个产品上，则活动类别不会从第三个产品上删除。

页面加载时（正确的输出）

当我直接将鼠标悬停在产品1上时。（它应该从产品第三部分移开）

请注意，我将鼠标悬停在产品1上，但产品3却显示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/

Answer 2

您可以这样做，

显式隐藏new_products并显示活动Products的div是否具有类new_product。

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

显式删除product_set_hover，这将删除最后一个活动的，然后将其分配回活动的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>

Answer 3

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

尝试一下。

Answer 4

您的代码似乎不错-但是需要一些调整。您需要在添加主类时删除该类

这里有hasClass（）函数，您可以在其中检查该类是否可用，如果将其删除可能会解决问题的

每当您将鼠标悬停在框上时，都需要删除新产品的范围

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

使用jQuery的悬停问题

4 个答案: