鼠标悬停时按钮开始闪烁

Question

1. 悬停时，"mouse_hover"div开始闪烁。我需要它稳定
2. 点击"查询"按钮会打开"查询选项"div。我需要"查询选项"div也应该在鼠标上隐藏为"mouse_hover"div，并在鼠标上显示，但这应该只有在触发点击事件之后

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; margin: -65px 0px 0px 5px; position: absolute; z-index: 30;" 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="<?php echo $this->__('Inquire') ?>" class="button btn-cart inquiry" ><span><span><?php echo $this->__('Inquire') ?></span></span></button>
      </div>
   </div>
</div>   
<div style="display: none;" class="enquiry-options">
</div>

JQUERY:

 jQuery(document).ready(function(){
         // This jquery opens up the "enquiry-options" div
             jQuery('.inquiry').on("click", function () {
                jQuery(".enquiry-options").css("display","block");
                });
             jQuery('.cloze').on("click", function () {
                 jQuery(".enquiry-options").css("display","none");
                });
// This jquery show "mouse_hover" div on hover
jQuery(function ($) {
    $('.prod .product-image').hover(function () {
        $(this).next().show();
    }, function () {
        $(this).next().hide();
    })
});
  });

Answer 1

请检查此Plunker

这是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>

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

鼠标悬停_470div