Question

当有人鼠标悬停在图片上时，我正试图显示div。

这是我的jQuery代码：

var $i = jQuery.noConflict(); 
$i("#overlay-<?php echo $j;?>").hover(function () {
    $i("#overlay-show-<?php echo $j;?>").fadeIn("fast");
    $i("#overlay-show-<?php echo $j;?>").fadeOut("fast");   
});

这是我的HTML代码

<div id="overlay-show-1" class="overlay-show" style="display: block;">
 <div class="product-price">
 <h2 class="product-name"><a title="Marotte Top"href="http://sabbathshop.com/index.php/apparel/marotte-top.html">Marotte Top</a></h2>   
 <div class="price-box">
 <span id="product-price-180" class="regular-price">
  <span class="price">$80.00</span></span>
  </div>
  </div>
   <div class="price-bottombg"></div>
 </div>

Answer 1

$i("#overlay-show-<?php echo $j;?>").is(":hidden")将返回一个对象，无论是否有匹配的选择器。

您应该检查length以查看是否有匹配项：

if ($i("#overlay-show-<?php echo $j;?>").is(":hidden").length>0) {

响应您的更新：

由于.hover()事件只有一个函数参数，当您将鼠标悬停在和上时，这将被操作。

同样在您的功能中，您呼叫fadeIn，然后直接跟fadeOut。因此，这将导致元素淡入，然后立即再次淡出（导致您提到的闪烁）。

您应该在悬停时仅将代码更改为fadeIn，并且只有fadeOut将其悬停在外。

$i("#overlay-<?php echo $j;?>").hover(function () {
    $i("#overlay-show-<?php echo $j;?>").fadeIn("fast"); 
}, function(){
    $i("#overlay-show-<?php echo $j;?>").fadeOut("fast");  
});

.hover Jquery在Mouseover上闪烁

1 个答案: