JS: функция mouseOver: новое состояние не получает css из старого состояния

Question

Я бы хотел использовать функцию mouseOver / mouseOut в JS, чтобы изменить цвет значка.

Значок белый, но мне бы хотелось, чтобы при наведении курсора на бирюзовый, а затем набелый, когда мышь отходит от значка.

В моем файле 3 документа:

.html
.css
.js

и 2 изображения:

skull.png (белый значок)skull2.png (бирюзовый значок)

Вот мой HTML:

 <div id='skull'>
   <a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()">
   <img class="icon" src="skull.png" alt="skull"/></a>
 </div>

Вот мой CSS для класса 'Icon':

.icon {
    margin: 0 25px;
    height: 40px;
    width: 40px;
}

И JSдля функции:

function mouseOver() {
document.getElementById("skull").innerHTML = '<img src="skull2.png" />';
}
function mouseOut() {
document.getElementById("skull").innerHTML = '<img src="skull.png" />';
}

У меня есть две проблемы:

1. Во-первых, когда я парю над белым черепом, череп, поворачивая бирюзовый, делаетНе подбирайте размеры, установленные классом «icon».Размеры - это скорее размер .png.Я хотел бы, чтобы они были размером с skull.png, как указано в CSS.Не знаете, как это работает?

2. При наведении курсора на бирюзовый череп значок не возвращается к белому

Вот видео спокажите, что я имею в виду немного больше: https://www.screenmailer.com/v/I5amMjkBaaeLtLU

(Извините, я довольно новичок в программировании)

Спасибо:)

Answer 1

Прежде всего, вам не нужно изменять весь внутренний HTML, и вы можете сделать это, изменив только атрибут image src.Таким образом, вы можете получить изображение по идентификатору только один раз, а не каждый раз, когда вызывается функция.

var img = document.getElementById('myImg');

img.onmouseout = function () {
   this.src = 'http://www.facetheforce.today/darthvader/200/200';
};

img.onmouseover = function () {
   this.src = 'http://www.facetheforce.today/c3po-alt/200/200';
};

<img id="myImg" src="http://www.facetheforce.today/darthvader/200/200"/>

Еще один способ сделать это - использовать курсор мыши и фоновое изображение.Например:

#bg-image {
  width: 200px;
  height: 200px;
  display: block;
  background: url("http://www.facetheforce.today/darthvader/200/200");
}

#bg-image:hover {
  background: url("http://www.facetheforce.today/c3po-alt/200/200");
}

<div id="bg-image"></div>

Answer 2

Попробуйте это

function mouseOver() {
    document.getElementById("skull").innerHTML = '<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()"><img src="skull2.png" class="icon" alt="skull" />';
}
function mouseOut() { 
    document.getElementById("skull").innerHTML = '<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()"><img src="skull.png" class="icon" alt="skull" />';
}

Вы не устанавливаете класс img как .icon.Кроме того, вы удаляете якорь из вашего div в первом mouseOver вызове, потому что вы заменяете его содержимое на <img src="skull2.png" />

Это должно решить ваши две проблемы, но есть лучший способ сделать это.

Добавьте id к вашему изображению, затем войдите в функции и измените только атрибут src изображений.