jquery悬停图像和文本问题

有试图让这个jQuery代码工作的问题。这个想法是，当图像被突出显示时，不透明度应该改变。现在它正在使用smallartcov类标记来更改不透明度。问题在于它上面有一些文字。所以文本算作离开图像区域的鼠标，即使它从未做过。我怎样才能解决这个问题？jquery悬停图像和文本问题

http://169.231.6.197/vathom/artist.php是测试主题托管的地方。如果你看@最右边的图片，你可以看到我的意思。下面是HTML我们有它：

<div class="artistg"> 
    <div class="smallartcov"></div><span class="smallarttxt">702</span> 
    <img class="smallartpic" src="images/df.jpg" /> 
</div>

有以下的jQuery一起：

<script type="text/javascript"> 
$('.smallartcov').hover(function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0'); 
}, function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0.5'); 
}); 
</script>

任何想法？非常感激。

来源

2012-04-24 MasterGberry

你的意思是计数应该增加悬停，应该记住任何新的页面请求？ – Ankit 2012-04-24 05:08:27

确保你的DOM加载脚本准备好了 – elclanrs 2012-04-24 05:09:32

你想隐藏文本？ – Jack 2012-04-24 05:12:26

您可以为文本添加悬停并很好地控制不透明度。这将解决你所面临的问题。我已经通过添加下面的代码进行了测试，

$('.smallarttxt').hover(function() { 
    $('.smallartcov').css('color', 'white'); 
    $('.smallartcov').css('opacity', '0'); 
}, function() { 
    $('.smallartcov').css('color', 'white'); 
    $('.smallartcov').css('opacity', '0.5'); 
});

来源

2012-04-24 05:13:11

辉煌！为什么我没有想到这一点。谢谢：） – MasterGberry 2012-04-24 05:16:06

，如果你希望在图像上悬停，那么你就必须使用这个jQuery代码

<script type="text/javascript"> 
$('.smallartpic').hover(function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0'); 
}, function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0.5'); 
}); 
</script>

来源

2012-04-24 05:08:41

您可以设置z-index: 1;到smallartcov类，但随后的文本也变暗来改变图像的不透明度。

来源

2012-04-24 05:12:02 Vertigo

您是否尝试过运用JS .hover包含所有信息完整的元素artistg？也许把JS应用到包含div的东西会让它的鼠标悬停在文本上，不会“离开”悬停状态。光标仍然可以变成I型光束，但只要仍然可以获得悬停不透明效果，则可以使用CSS将光标保持为所需的任意值，以免中断图像悬停。

来源

2012-04-24 05:17:19

只需推动悬停功能到父容器，它会自动包括图片和文字：

$('.artistg').hover(function() { 
     $(this).find('.smallartcov').css('opacity', 0); 
    }, function() { 
     $(this).find('.smallartcov').css('opacity', .5); 
    } 
);

工作演示在这里：http://jsfiddle.net/jfriend00/LnLpM/

仅供参考，我去掉了颜色的设置，因为它似乎没有做任何事情，不管是否徘徊都是一样的。

来源

2012-04-24 05:24:52 jfriend00

jquery悬停图像和文本问题

回答

相关问题