Jquery 淡入淡出链接
请有人能帮我写这个简单的脚本Jquery 淡入淡出链接,jquery,hyperlink,fadein,fadeout,jquery-hover,Jquery,Hyperlink,Fadein,Fadeout,Jquery Hover,请有人能帮我写这个简单的脚本 <script> $(".offr-list-desc-anch").hide(); $(function () { $(".grey-shadow").hover(function () { $(".offr-list-desc-anch").stop().fadeIn() }, function () { $(".offr-list-desc-anch").stop().fadeOut(); }
<script>
$(".offr-list-desc-anch").hide();
$(function () {
$(".grey-shadow").hover(function () {
$(".offr-list-desc-anch").stop().fadeIn()
}, function () {
$(".offr-list-desc-anch").stop().fadeOut();
});
});
</script>
$(“.offr list desc anch”).hide();
$(函数(){
$(“.grey shadow”).hover(函数(){
$(“.offr list desc anch”).stop().fadeIn()
},函数(){
$(“.offr list desc anch”).stop().fadeOut();
});
});
我用它来淡入淡出我的链接,但当我悬停一个链接,效果发生在所有其他链接。。。我只想在悬停的链接上生效
这是我的HTML
<a href="#" class="offr-list-itm grey-shadow">
<div class="offr-list-desc-txt">
<img width="223" height="159" border="0" class="grey-shadow" src="images/sportive_suit.jpg">
<div class="offr-list-desc-anch" >
<div class="offr-list-item-detls">
<div class="price"><span class="price-value">200</span><span>LE</span></div>
<div class="discount-box">
<div class="off"><span class="price-detalis-tit">Discount</span> <span class="save-currency">50 <span class="save-currency-symbol">%</span> </span> </div>
<div class="save"> <span class="price-detalis-tit">You Save</span> <span class="save-currency"> 200 <span class="save-currency-symbol"> LE </span></span> </div>
</div>
</div>
<p class="more-offers-unitit"> L.E 200 Instead of L.E 400 for 1 Month of Self Defense Classes from Circle Aikido</p>
</div>
<script>
$(".offr-list-desc-anch").hide();
$(function(){
$(".grey-shadow").stop().hover(function(){
$(".offr-list-desc-anch").fadeIn()
},function(){$(".offr-list-desc-anch").stop().fadeOut();
});
return false;
});
</script>
</div>
</a>
您需要指定特定于当前悬停元素的目标,以便它不会影响其他元素。所以试着这样做:
$(function () {
$(".offr-list-desc-anch").hide();
$(".grey-shadow").hover(function () {
$(this).find(".offr-list-desc-anch").stop().fadeToggle(); //find the element specific to hovered anchor tag element
});
});
也不要将脚本包装到div元素中,您不需要这样做。试试看
$(".grey-shadow").hover(function () {
$(this).next().stop().fadeIn()
}, function () {
$(this).next().stop().fadeOut();
});
我们的想法是使用悬停点作为参考,而不是整个DOM。html是什么样子的?你需要针对特定的一个。你能做一个JSFIDLE以便我们能找到错误吗?这里有一个锚定标记,但我不知道为什么它没有出现在代码中。灰色阴影是锚定标记,当它悬停时会发生效果…@SabryMuhamadSabry看到答案更新了…我认为
find
不会起作用,因为列表不在img
tagOh非常感谢你。。。它现在运转得很好。。但我还是看不出我哪里做错了。。是的,我知道我必须指定我需要采取行动的目标。。。但是您在脚本中的位置/方式???@SabryMuhamadSabry您看到了吗$(this).find()
它只选择特定于悬停的元素。是的,但它不会这样工作,因为我的悬停点不是我要生效的div的下一个或上一个。。