ホバー上でインラインコードで画像を変更する

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