Change CSS3 Background image on <p> hover

I'm trying to make the background image (that I set using the CSS3 "background" and "background-size") change when I hover over a certain paragraph. I've tried:

in jQuery

$(function () {
    $('#web').hover(f开发者_运维百科unction () {
        $(this).css('background', '#000 url(space-image.png) center center fixed no-repeat');
    })
});

in Javascript

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

and others with no luck.

First,

$(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'
});

Also,

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

Currently, the browser will think the onmouseover function stops at the " before body. The browser will set everything between " and the second " to onmouseover. So that's:

document.getElementByName(

which doesn't quite work obviously. You'd need to change the first and last " into a '. That way, the browser will take everything between the 's as the onmouseover value which works.

Have you considered doing this entirely with CSS3 pseudo-classes? In other words:

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

EDIT:

Do you want to change the background image of the entire page or just a single element? If it's the entire page, then you'll want to substitute $('body') for $(this), since $(this) is just referring to the #web element that you're selecting in the previous line.

This works: 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: ""});
    });
});

Some observations with your non-jQuery code:

What does onMouseOver refer to? Are you assigning that string to a variable? The onmouseover property of an element must be in all lower case.

You have to escape quotes in your string with \. So ...("body")... becomes ...(\"body\")....

There is no getElementByName method. There's a getElementsByName (plural), but did you really give an element a name attribute of "body"? You can get the body element simply by: document.body.

Why use a string, you should use a function:

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

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

above example contain how to change the background-color and font-size using hover.