<a>タグ要素にホバリングしたときに、画像の色を完全に変更するにはどうすればよいですか？

私は、背景色を変更するためにイメージをホバーするこのサンプルコードを持っています。ホバリングされたとき、どのようにイメージ全体を色で塗りつぶすのですか？<a>タグ要素にホバリングしたときに、画像の色を完全に変更するにはどうすればよいですか？

私のコードスニペットでは、タグ要素の背景色を塗りつぶしますが、画像は塗りつぶしません。

ここに私の質問をさらに明確にするためのイメージがあります。タグ要素でホバー効果を使ってこれを実現するにはどうすればよい

。あなたのイメージは白であり、他の部分が透明であると仮定すると

a img:hover { 
 
    background-color: purple; 
 
} 
 
a:hover { 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<!-- Hovered with image no text --> 
 
<a href="https://www.w3schools.com"><img src="cart.png"></a> 
 

 
<!-- Hovered without image just text --> 
 
<a href="http://www.wikipedia.org">Change color text</a> 
 
</p> 
 

 
</body> 
 
</html>

出典

2017-03-16 Laurence Albano

変更更新してください：ホバーが単純な方法です...それが確かにイメージの場合 - それはいくつかの派手なフォントのグリフであれば、CSS背景色プロパティを変更するだけです：ホバー –

イメージの 'display' CSSプロパティを' none'と 'inline'の間で切り替えることができます。画像がsvgの場合は、画像自体にも色を付けることができます。 –

。私は2つの画像を持っていると思われるので、それをホバリングすると画像が変わります。おかげで情報のため@Jaromanda X

#my-img:hover { 
 
    content: url('images/pinkcart.png'); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 

 
<body> 
 

 
<img id="my-img" src="images/redcarticon.png"/> 
 
</p> 
 

 
</body> 
 
</html>

、私に皆を助けるためにもありがとうございました。

出典

2017-03-16 04:00:09

。ただ、そのようにCSSを変更します。私は、背景画像を変更するための別の方法を発見した

a img { 
 
    background-color: purple; 
 
} 
 
a:hover img { 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<!-- Hovered with image no text --> 
 
<a href="https://www.w3schools.com"><img src="cart.png"></a> 
 

 
<!-- Hovered without image just text --> 
 
<a href="http://www.wikipedia.org">Change color text</a> 
 
</p> 
 

 
</body> 
 
</html>

出典

2017-03-16 03:48:28

はjQueryを使って以下の溶液で試してみてください：

a img:hover { 
 
    background-color: purple; 
 
} 
 
a:hover { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
<!-- Hovered with image no text --> 
 
<a id='image' href="https://www.w3schools.com"><img src="cart.png"></a> 
 

 
<!-- Hovered without image just text --> 
 
<a id="text" href="http://www.wikipedia.org" onmouseover="$('#image').css('background-color', 'purple');" onmouseout="$('#image').css('background-color', 'white');">Change color text</a> 
 

 
</body>

出典

2017-03-16 04:04:03

上のCSSのbackground-imageプロパティスタイル

a{ 
    padding:15px; 
    background-color: purple; 
    display:block; 
} 
a:hover { 
    background-color: yellow; 
}

出典

2017-03-16 06:52:29 vishalgelani

<a>タグ要素にホバリングしたときに、画像の色を完全に変更するにはどうすればよいですか？

答えて

関連する問題