호버상의 이미지 src 변경하기

Question

나는 그렇게 간단한 질문이 있습니다. 나는 4 열을 가진 테이블을 가지고 있으며 각 테이블에는 차례로 <img>이 들어있는 태그가 있습니다. 내가 mouseover 때 img의 src를 변경할 수있는 CSS 또는 javascript에서 방법을 찾고있다.

그래서 예를 들어, 행의 한 지금과 같습니다

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

지금이 그것을해야으로 아름답게 작동 크롬에 있지만 파이어 폭스와 IE에서는 마우스 오버에 아무런 변화가 없다. 이것을 바로 잡기 위해 무엇을 할 수 있을까? 이름이 모두 종래와 같이 40 개의 버튼에 대해이 작업을 수행하는 더 좋은 방법이 있습니까? IE의 링크는 alt의 소문자 버전이며 이미지 src의 .png 비트와 같습니다. 차례로 img src 위에 마우스를 올리면 동일하지만 img src 위로 마우스를 가져 가면 .

도움을 주시면 감사하겠습니다. 감사합니다

Answer 1

에만 작동 : 대신, background-imagediv A의 사용합니다.

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

또는 기본 자바 스크립트

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

Answer 2

content 속성은 의사 요소에만 적용 할 수 있습니다. 이 의사 요소의 경우 솔루션은 귀하의 질문에 설명 그건

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