css hover：1つの画像でのみ動作しますが、複数ではありませんどのように機能を定義しますか

私は単純なホバー効果をしようとしています。私はウェブサイトのテンプレートを使用しました。css hover：1つの画像でのみ動作しますが、複数ではありませんどのように機能を定義しますか

これは完全に機能しますが、ドキュメントに1つのホバー効果しかない場合にのみ有効です。

すなわち：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.urlImg { width: 300px; height:211px; display:block; background-image: url('images/001.jpg'); } .urlImg:hover { background-image: url('images/001over.jpg'); } </style> 
</head> 

<body> 
<a href="http://www.corelangs.com" class="urlImg" title="Corelangs link"> 
</a> 

</body> 
</html>

しかし、私は2つの異なるホバーを実装する場合。（基本的に私は12件のプロジェクトが言うと、彼らはホバーサムネイルをクリックすると、別の画像になるとサムネイルの概要をやりたい。それは完全に失敗した...

この例では、私は

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.urlImg { width: 300px; height:211px; display:block; background-image: url('images/001.jpg'); } .urlImg:hover { background-image: url('images/001over.jpg'); } 

.urlImg2 { width: 300px; height:211px; display:block; background-image: url('images/002.jpg'); } .urlImg:hover { background-image: url('images/002over.jpg'); } 

</style> 
</head> 

<body> 

<a href="http://www.corelangs.com" class="urlImg" title="Corelangs link"></a> 
<br> 
<a href="http://www.corelangs.com" class="urlImg2" title="Corelangs link"></a> 

</body> 
</html>

ホバー2秒を追加しました変更するには、どのような

doesntの仕事...任意のアイデア

出典

2016-04-11 FranzMarkus

マウスが「div」上を「ホバー」しているときや、イメージを*ホバー*にしてページの残りの部分に浮かんでいるように見せているときに効果を生じさせたいですか？ –

'urlImg：hover'が2回ありますが、' urlImg2：hover'はありません – JaxCze

あなたが二回.urlImg:hoverを繰り返す代わりに.urlImg2:hoverを使用しているので、これはマイナーなコピー＆ペースト・エラーのようになります？

.urlImg { /*omitted for brevity */ } 
.urlImg:hover { background-image: url('images/001over.jpg'); } 

.urlImg2 { /* omitted for brevity */ } 
.urlImg2:hover { background-image: url('images/002over.jpg'); }

出典

2016-04-11 19:55:17

本当に助けてくれてありがとう！ – FranzMarkus

これは私が今したいことすべてを行うことができることを意味します;） – FranzMarkus

css hover：1つの画像でのみ動作しますが、複数ではありませんどのように機能を定義しますか

答えて

関連する問題