Проблема с наведением курсора при использовании jquery

У меня три продукта. Я показываю последний активный продукт при загрузке страницы. Если я наведу курсор на другой продукт, активный класс будет назначен продукту.

Теперь моя проблема в том,

1) Мне нужно удалить текст New product из третьего продукта при наведении курсора на один или два продукта, если навести курсор на третий, то снова отобразится New Product.

2) Если я наведу курсор на первый продукт, то активный класс не удалится из третьего продукта.

Когда моя страница загружается. (Это правильный вывод) enter image description here

Когда я нахожу прямо на продукт один. (Следует удалить из продукта треть) enter image description here

Обратите внимание: я наведен на продукт 1, но продукт 3 показывает текст New Product. Я должен это удалить. 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>
4
0
78
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете сделать это так,

  1. Скрыть new_products явно и показать, имеет ли активный блок Products класс new_product.

    $("div.new_products").hide();
    $("div.product_set_hover div.new_products").show();
    
  2. Удалить product_set_hover явным образом, при этом будет удален последний активный объект, а затем он снова назначен активному div Products.

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

Это покажет ярлык «новые продукты» для всех продуктов, у которых он есть. Не только для того, что зависло.

Gerard 31.10.2018 12:23

@Gerard, этот фрагмент кода будет выполняться для зависшего продукта, а $(this) будет выполняться только для активного продукта

Hary 31.10.2018 12:25

Добавьте div «новые продукты» для первого продукта, а затем наведите на него курсор. Он появится для продукта 1 и продукта 3.

Gerard 31.10.2018 12:26
Ответ принят как подходящий

вы можете сделать это так: при наведении курсора на элемент продукта удалите фон из всех элементов «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, пожалуйста, проверьте jsfiddle, показывающий другой код и вывод

user9437856 31.10.2018 12:38

Я изменил ссылку на скрипку

Mustapha Larhrouch 31.10.2018 12:47

@MustaphaLarhrouch, да, у меня ваш код отлично работает.

user9437856 01.11.2018 14:53
$(".products").hover(
  function() {
    $('.products').removeClass("product_set_hover");
    $(this).addClass("product_set_hover");
  },
);

Попробуй это.

Дай мне время проверить.

user9437856 31.10.2018 12:39

Ваш код кажется хорошим, но он требует некоторых настроек. Вам нужно удалить класс при добавлении, это основная идея

Здесь идет функция 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");
                  }
            });
        });

Другие вопросы по теме