Jquery 鼠标悬停时按钮开始闪烁 悬停时，“鼠标悬停”div开始闪烁。我需要它稳定 点击“查询”按钮，打开“查询选项”div。我需要“查询选项”div也应在鼠标上隐藏为“鼠标悬停”div，并在鼠标上显示，但这应仅在点击事件触发后才显示

HTML:

请检查这个

以下是JS：

jQuery(function ($) {
    $('.prod .product-image').hover(function () {
        $(this).next().show();
    }, function () {
        //$(this).next().hide();

    })

    $( ".mouse_hover_470" ).mouseleave(function() {
    console.log(111)
       $(this).hide();
    });
});

  });

HTMl:

<div class="prod">
   <a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
   <div style="display: none;" class="mouse_hover_470">
      <input type="hidden" id="prod_id" value="470">             
      <h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
      <div class="price-box">
         <span id="product-price-470" class="regular-price">
         <span class="price">$387.15</span>                                   
         </span>
      </div>
      <div class="actions">
           <button type="button" title="Inquire " class="button btn-cart inquiry" ><span><span>Inquire</span></span></button>
      </div>
   </div>
</div>   

<div style="display: none;" class="enquiry-options">

</div>

$387.15                                   
询问

Iy将在hove上显示查询按钮，并在鼠标离开时将其隐藏

---

鼠标悬停/470 div

您添加了两个语句$（this）.next（）.show（）；和$（this.next（）.hide（）；这就是它不稳定的原因。从div边距中删除这个css：-65px 0px 0px 5px；或正确设置边距，以便在移除边距后，其不会与Hyperlink内的img重叠：-65px 0px 0px 5px；从div你的眨眼问题将goneThanks RIYAJ。但我还需要将它隐藏在鼠标外。470是类中的产品id，它是动态的。我使用了这个：var bla=jQuery（'.prod_id'）.val（）；获取id的值。但它不起作用。以下是编辑后的代码：jQuery（函数（$）{$（'.prod.product image'）.hover（函数（）{$（this.next（）.show（）；}，函数（）{/$（this.next（）.hide（）；}）$（“.mouse_hover”+bla.mouseleave（函数（）{console.log（111）$（this.hide（）；）；}）@Aashi“prod_id”是id，而不是类。因此，var bla=jQuery（'.prod_id'）.val（）；不是正确的。它应该是var bla=jQuery（'#prod_id'）.val（）；这是更新的plunker

jQuery(function ($) {
    $('.prod .product-image').hover(function () {
        $(this).next().show();
    }, function () {
        //$(this).next().hide();

    })

    $( ".mouse_hover_470" ).mouseleave(function() {
    console.log(111)
       $(this).hide();
    });
});

  });

<div class="prod">
   <a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
   <div style="display: none;" class="mouse_hover_470">
      <input type="hidden" id="prod_id" value="470">             
      <h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
      <div class="price-box">
         <span id="product-price-470" class="regular-price">
         <span class="price">$387.15</span>                                   
         </span>
      </div>
      <div class="actions">
           <button type="button" title="Inquire " class="button btn-cart inquiry" ><span><span>Inquire</span></span></button>
      </div>
   </div>
</div>   

<div style="display: none;" class="enquiry-options">

</div>