изменение изображения при наведении указателя мыши на javascript

Question

Название.

Я видел много способов сделать это, когда используется IMG элемента:

<img src="blah" id="get" onmouseover="newImage()" onmouseout="oldImage() 

Javavscript

function newImage() { document.getElementById(get").src="blah2"} 
function oldImage() { document.getElementById("get").src="blah"} 

Но я держу свои изображения на CSS, как background-image: url() внутри идентификатор:

<div id="image" 

Как я применяю тот же принцип, но когда изображения находятся на CSS и его на divid

NEW TO JAVASCRIPT ПОЖАЛУЙСТА, НЕТ РАМКИ.

Answer 1

Для этого вам не нужен JavaScript (но я предоставляю альтернативу JavaScript ниже), используйте только псевдокласс класса CSS :hover.

#get { 
    background-image: url(/path/to/image/when/not/hovering.png); 
} 
#get:hover { 
    background-image: url(/path/to/image/when/hovering.png); 
} 

Пример: ДИВ показывает значок пользователя, как правило, затем показывает мину при наведении его:

#get { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-image: url(https://graph.facebook.com/950389301719024/picture?type=small); 
 
} 
 
#get:hover { 
 
    background-image: url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG 
 
); 
 
}

<div id="get"></div>

Но если вы действительно хотите использовать JavaScript, это очень похоже на код, который вы указали, вы просто меняете .style.backgroundImage на свой элемент вместо изменения .src:

function startHover(element) { 
 
    element.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)"; 
 
} 
 
function stopHover(element) { 
 
    element.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)"; 
 
}

#get { 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)" onmouseover="startHover(this)" onmouseout="stopHover(this)"></div>

Но я препятствовать использованию onxyz атрибутов; использовать современные обработки событий вместо:

(function() { 
 
    var div = document.getElementById("get"); 
 
    div.addEventListener("mouseover", function() { 
 
    div.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)"; 
 
    }, false); 
 
    div.addEventListener("mouseout", function() { 
 
    div.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)"; 
 
    }, false); 
 
})();

#get { 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)"></div>

Это использует addEventListener, который поддерживается всеми современными браузерами (не IE8 или IE9-IE11 в их режиме разбитого "совместимости"). Если вам необходимо их поддерживать, имеет функцию, которую вы можете использовать для обработки кросс-браузера без библиотеки.