Изменение изображения src on hover

Question

У меня есть быстрый вопрос, который должен быть таким простым. У меня есть таблица, которая имеет 4 столбца, и в каждом из них у меня есть тег, который, в свою очередь, содержит <img>. Я ищу способ в css или javascript, что я могу изменить src img при наведении курсора мыши.

Так, например, только одна из строк будет выглядеть так:

<td><a href="http://link1/"><img alt="Link1" src="http://images/Link1.png/" /></a></td> 

и CSS, что у меня есть на данный момент является:

img[alt="Link1"]:hover { 
    content:url("http://Link1Pressed.png"); 
} 

Теперь это прекрасно работает, как это следует делать в chrome, но в Firefox и IE он просто ничего не делает для мыши, что я могу сделать, чтобы исправить это? Есть ли лучший способ сделать это для 40 кнопок, которые у меня есть особенно, поскольку имена являются обычными. IE, ссылка представляет собой строчную версию alt, которая совпадает с бит pre.png изображения src, который, в свою очередь, такой же, как наведение на img src, но для того, что наведение на img src также нажато ,

Ваша помощь была бы очень оценена. Thanks

Answer 1

Это решение изложено в вашем вопросе работает только тогда, когда это псевдо-элемент. Вам нужно либо сделать его фоновое изображение на a или td и изменить его таким образом, или использовать функцию JQuery, как это:

$('a').on('mouseover', function() { 
    $(this).find('img').attr('src', 'path/to/my/image.png'); 
}); 

или родной JavaScript

document.querySelectorAll('a img[alt=Link1]').addEventListener('mouseover', function() { 
    this.src = 'path/to/my/image.png'; 
}); 

Answer 2

Свойство content может применяться только к псевдо элементам. Вместо этого, используйте background-image на div:

div[alt="Link1"]{ 
    background-image: url("http://images/Link1.png"); 
} 
div[alt="Link1"]:hover { 
    background-image: url("http://Link1Pressed.png"); 
}