Question

当我将鼠标悬停在特定段落上时，我正在尝试将背景图像（我使用CSS3“背景”和“背景大小”设置）更改。我试过了：

jQuery中的

$(function () {
    $('#web').hover(function () {
        $(this).css('background', '#000 url(space-image.png) center center fixed no-repeat');
    })
});

在Javascript中

onMouseOver="document.getElementByName("body").style.backgroundColor = 'red';

和其他没有运气的人。

Answer 1

首先，

$(function(){
    $('#web').hover( function(){
          $(this).css('background', '#000 url(space-image.png) center center fixed no-repeat');
     }); // <-- you missed this, meaning 'end of hover function'
});

此外，

onMouseOver="document.getElementByName('body').style.backgroundColor = 'red';

目前，浏览器会认为onmouseover功能在"之前的body停止。浏览器会将"和第二个"之间的所有内容设置为onmouseover。那就是：

document.getElementByName(

显然不太明显。您需要将第一个和最后一个"更改为'。这样，浏览器会将'之间的所有内容作为有效的onmouseover值。

Answer 2

您是否考虑过完全使用CSS3伪类？换句话说：

#web:hover {
    background: #000 url(space-image.png) center center fixed no-repeat;
}

修改

您想要更改整个页面的背景图像还是仅更改单个元素？如果它是整个页面，那么你将要用$（'body'）代替$（this），因为$（this）只是指你在前一行中选择的#web元素。

Answer 3

这有效：http://jsfiddle.net/gilly3/aBCqQ/

$(function(){
    $("div").hover(function(){
        $(this).css({backgroundImage: "url(http://farm2.static.flickr.com/1234/1324629526_1020726ce3_m.jpg)"});
    },function(){
        $(this).css({backgroundImage: ""});
    });
});

使用非jQuery代码的一些观察结果：

onMouseOver指的是什么？您是否将该字符串分配给变量？元素的onmouseover属性必须全部小写。

您必须使用\转义字符串中的引号。因此...("body")...变为...(\"body\")...。

没有getElementByName方法。有getElementsByName（复数），但你真的给元素一个名称属性“body”吗？您可以通过以下方式获取body元素：document.body。

为什么要使用字符串，你应该使用一个函数：

myElement.onmouseover = function() {
    document.body.style.backgroundColor = "red";
};

Answer 4

$("p").hover(function() {
    $("p").css("background-color", "yellow");
}, function() {
    $("p").css("font-size", "25px");
});

以上示例包含如何使用悬停更改background-color和font-size。

在<p>悬停</p>上更改CSS3背景图像

4 个答案: