Изменить фоновое изображение CSS3 на <p>при наведении

Question

Я пытаюсь изменить фоновое изображение (которое я установил с помощью CSS3 «background» и «background-size») при наведении курсора на определенный параграф Я пробовал:

в 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(

, который не совсем работает, очевидно. Вам нужно изменить первый и последний " на '. Таким образом, браузер примет все между ' s как значение onmouseover, которое работает.

Answer 2

Рассматривали ли вы сделать это полностью с псевдоклассами CSS3? Другими словами:

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

EDIT:

Хотите изменить фоновое изображение всей страницы или только одного элемента? Если это вся страница, то вам нужно заменить $ ('body') на $ (this), поскольку $ (this) просто ссылается на элемент #web, который вы выбрали в предыдущей строке.

Answer 3

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

В приведенном выше примере

указано, как изменить background-color и font-size с помощью наведения.

Answer 4

Это работает: 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 (множественное число), но действительно ли вы дали элементу атрибут name "body"?Вы можете получить элемент body просто: document.body.

Зачем использовать строку, вы должны использовать функцию:

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