現在の画像にマウスを乗せたときにコードを変更して画像を変更できるようにするにはどうすればよいですか？イメージマウスのホバー効果はどのようにして行いますか？
私は変更したい画像は、私のWebページのbodyに座っている：
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
と私はあなたがmyImage.jpgにカーソルを合わせると、新しいイメージ、anotherImage.jpgに変更するには、例えばこの画像をしたいと思います。私は他の場所で助けを見つけようとしましたが、失敗しました。
JavaScriptのonmouseoverイベントを使用できますが、可能であればCSSを使用することをお勧めします。
ここに1つの可能な解決策のデモです：(Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>は基本的に、これが機能する方法は、2枚の画像がCSSを通じて同じサイズに作られ、かつ配置されていることですお互いの上に（それは絶対的な位置付けのためのものです）。ユーザーが上に乗っていないと、2番目の画像の不透明度は0になります（nth-of-type(2)セレクタはそのタイプの2番目の要素を選択します）。したがって、表示されず、最初の不透明度は1です。可視。ユーザーがその上に置くと、2番目の不透明度は1になり、完全に見えるようになります。また、同じサイズで互いに重なり合っているため、最初のものは2番目のもので覆われます。これは、画像の上にマウスを置くと画像が変化することを意味します。
デモでわかるように、完全にアニメーション化可能です。 display: noneなどの他のソリューションや背景画像は、アニメーション化可能なプロパティではないため、CSSトランジションでは使用できませんが、不透明度はアニメーション化可能ですので、このようなトランジションを作成できます！がんばろう！
この方法の説明がわからない場合は、お気軽にお問い合わせください。
CSSには、最初のクラスに最初のイメージが含まれます。次に、2番目のクラスはクラス名+ホバーになります。 EX。 .CLASSNAME：ホバー{}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}
これは技術的には機能しますが、セマンティクスには必ずしも適しているとは限りません。実際のイメージは実際のコンテンツの一部ですが、背景イメージは内容ではなくスタイルです。 XP –
あなたが<span>タグまたはそうに両方の画像を追加することができた場合は、あなたがこれを行うことができます：
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>あるいは、擬似要素を使用します第2の画像については、
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>/アウト効果でいくつかの基本的なフェードの例については、このjsFiddleを参照してください。
+1疑似要素の例です！それはそれを巧みに使います！それは画像がホバリングにのみロードされることを意味しますが？それは、ページの残りの部分で画像を読み込むように再構成することができますか？これは、接続が遅い人が負荷をかけている途中で苦労する必要がないように、より良いかもしれません。疑似要素のアイディアは独創的です！ xP –
ありがとう、それは2番目のアプローチでは、ホバーにのみロードされます。必要に応じて変更することができます。ちょうどいくつかのアイデアを提案し、例を単純にしたいと思っています。 – Stickers
これは完全に動作します、ありがとう！私は若干の問題を抱えていますが、なぜ画像の位置を編集しようとしたときに何らかの理由で（パディング、上、左などで）移動しないのはなぜですか？現時点では、彼らは左上にありますが、私はそれらを動かす必要がありますが、少しの問題があります。 – toadflax
個々の画像を動かしてXPを動作させないようにするためには、div.content全体を動かす必要があります。それはあなたのために働くのですか？ **編集：私はそれを移動する方法を示すために上のデモを編集しました！** –
この作品は完全に、ありがとう！簡単な質問ですが、**でフェードする画像を移動することは可能ですか？つまり、マウスの前に表示されている**画像の背後にある**画像です。 – toadflax