Change CSS3 Background image on <p> hover

Question

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(function () {
        $(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.

Answer 1

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.

Answer 2

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.

Answer 3

$("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.

Answer 4

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";
};