我编写了这段代码,可以在您向其添加“ simplehover”类的任何图像上产生滚动悬停效果:
//rollover effect on links
$(".simplehover").mouSEOver(function () {
$(this).attr("src",$(this).attr("src").replace("-off.","-on."));
}).mouSEOut(function () {
$(this).attr("src",$(this).attr("src").replace("-on.","-off."));
});
<img src="slogan.gif" class="simplehover" />
我想让它工作,如果您将类’simplehover’添加到周围的元素:中. (对于ASP.net asp:HyperLink标记特别有用,该标记会在超链接内自动生成IMG标记.
<a href="#" class="simplehover"> <img src="slogan.gif" /> </a>
如果我将选择器更改为:$(“.simplehover img”),它将起作用,但是在senario#1中将不再起作用.
我尝试了这个,但是没有运气:
$(".simplehover").mouSEOver(function () {
if ($(this).has('img')) { $(this) = $(this).children(); }
...
任何人都可以弄清楚吗?
最佳答案
您可以结合使用hover()方法和multiple selector进行重构.
$("a.simplehover img,img.simplehover").hover(function () {
$(this).attr("src","-on."));
},function() {
$(this).attr("src","-off."));
});
<img src="slogan.gif" class="simplehover" />