Question

将鼠标悬停在＆＃34; mouse_hover＆＃34; div开始闪烁。我需要它稳定。
按钮＆＃34;查询＆＃34;点击它打开＆＃34;查询选项＆＃34; DIV。我需要＆＃34;查询选项＆＃34; div也应该隐藏鼠标，因为＆＃34; mouse_hover＆＃34; div并在鼠标上显示，但这应该仅在触发click事件后

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>

我会在hove上显示查询按钮并在鼠标离开

时隐藏它

mouse_hover_470 div

鼠标悬停时按钮开始闪烁

1 个答案: