인버트 코드로 호버상에서 이미지를 변경하십시오.

Question

호버에서 이미지를 변경하려고합니다. 나는 여러 가지 방법을 시도했지만 아무 것도 효과가 없다. 그리고 저는 이런 것을 사용해야합니다. 이 코드에 문제가 있으면 알려주십시오. 미리 감사드립니다

코드 당신이해야 할

<a href = "https://my-website.com/results/testimonials-global-supply-chain-group/"> 
    <img id = "home-button" alt = "" src = "https://my-website.com/wp-content/uploads/2017/11/businessman-2606509_1920_20171107090703313.jpg" 
    onmouseover="$(this).attr('src','https://my-website.com/wp-content/uploads/2017/10/testimonialpage.jpg');" 
    onmouseout="$(this).attr('src','https://my-website.com/wp-content/uploads/2017/10/businessman-2606509_1920_20171107090703313.jpg');"> 
    </a> 

Answer 1

우선 당신이 포함 된 경우 jQuery를 확인하고 오류 콘솔 보는 것입니다. 또한 코드를 작성한 것처럼 많은 작업을 수행 할 필요가 없습니다. 당신은 this.src를 사용할 수 있습니다

<a href="#"> 
 
    <img src="//placehold.it/100?text=Hello" 
 
     onmouseover="this.src='//placehold.it/100?text=Over'" 
 
     onmouseout="this.src='//placehold.it/100?text=Hello'" 
 
     alt="" 
 
    /> 
 
</a>

체크리스트

1. 콘솔을 확인하십시오.
2. jQuery가로드 되었습니까?
3. 이미지 경로가 정확합니까?

Answer 2

시도해보십시오. jQuery에서

호버 효과 :

function hover(element) { 
    element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff'); 
} 
function unhover(element) { 
    element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff'); 
} 

및 HTML은 : 당신은 그냥 가져가에 이미지를 변경하려면

<img src="my-src" onmouseover="hover(this);" onmouseout="unhover(this);" />

Answer 3

, 당신은 그것을 할 CSS를 사용할 수 있습니다.

런타임에 수행하려는 경우이 게시물에서 메소드를 사용할 수 있습니다. Change :hover CSS properties with JavaScript