Question

当鼠标悬停在锚点.I1上时，我想这样做：

$("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
$(".opacity").css("opacity", "0.7");

当鼠标离开时：

$("html").css("background","");
$(".opacity").css("opacity", "1"); 
//which is the same as going back to what it was before it's hovered

这是我所拥有的，但不起作用：

HTML

<a class="I1" href="Photos/8143009-exterior06.jpeg">
    <img src="Photos/8143009-exterior06.jpeg" alt="" width="297" height="200" />
</a>

JS：

$(".I1").hover(function(){
    $("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
    $(".opacity").css("opacity", "0.7");
});

我想在显示的一排照片中为每张照片执行此操作。

是否还有更快的方法，而不是必须为每张照片编写脚本？

Answer 1

有关hover()的文档说明了这一点（see reference）：

.hover（handlerIn（eventObject），handlerOut（eventObject））

当鼠标进入时，您正在调用自定义函数（hover()的第一个参数），而不是在它离开时（第二个参数）。

因此，您可以为此更改代码：

$(".I1").hover(function(){
     $("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
     $(".opacity").css("opacity", "0.7");
},function(){
     $("html").css("background","");
     $(".opacity").css("opacity", "1")
});

修改

我认为坚持我的命题会更好，。

如果没有关于您要实现的目标的更多信息，我猜是这样的：您将拥有多个.I1，并且当您要对其进行编码时，复制它将会很长/粘贴每个元素的hover函数，并在每个元素中添加正确的图片链接。（如果我错了，请纠正我）

我建议你做的是提取你的照片的链接，并将其用作你的html背景（所以，无论悬停元素如何，背景都会适应）。

$(".I1").hover(function() {        
     var imageToPrint = 'url(' + $('img',this).attr('src') +')';
     $("html").css("background", imageToPrint + "no-repeat center center fixed");
     $(".opacity").css("opacity", "0.7");
},function(){
     $("html").css("background","transparent");
     $(".opacity").css("opacity", "1")
});

Here's a fiddle for demonstration.

Answer 2

点击此链接http://api.jquery.com/mouseenter/。

他们正在做你想要的事情，但他们正在更改div中的文本（查看底部的示例），你需要更改背景。

我希望我能帮忙。

Answer 3

    //When mouse rolls over
    $(".I1").bind('mouseover mouseenter', function() {
        //do stuff
    });

    //When mouse is removed
    $(".I1").bind('mouseout mouseleave', function() {
        //do stuff
    });

可能会用这个。：）

.hover鼠标离开时不工作

HTML

JS：

3 个答案:

修改