0
私はJSの人ではありませんが、私は、訪問者が背景イメージの上にマウスを置いたときに、コンテンツに「バブル」を表示する方法を見つけようとしています。静的背景画像のホバー効果を作成する方法...?
<div id="certifications">
<p class="gold left">Microsoft Gold Partner</p>
<p class="sdvo center">Service Disabled Veteran Owned Small Business</p>
<p class="ibm right">IBM Authorized Partner</p>
</div><!-- end #certifications -->
そして、その領域を制御するCSSルックスは、次のようになります:誰かが3枚の背景画像のいずれかをマウスオーバーすると
#certifications {
height: 111px;
clear: both;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
#certifications p {
margin-top: 20px;
text-indent: -9999px;
}
#certifications .gold {
background-image: url(images/microsoft-gold.jpg);
background-repeat: no-repeat;
display: inline;
height: 70px;
width: 33%;
float: left;
margin-top: 25px;
padding: 0;
}
#certifications .sdvo {
background-image: url(images/sdvosb.png);
background-repeat: no-repeat;
display: inline;
height: 100px;
width: 30%;
float: left;
margin-left: 20px;
}
#certifications .ibm {
background-image: url(images/partners/IBM.png);
background-repeat: no-repeat;
display: inline;
height: 99px;
width: 31%;
margin-top: 25px;
margin-left: -50px;
}
、私は効果が欲しいHTMLは次のようになります表示するには(理想的にはCSSを使用しますが、JSを使用する必要がある場合は大きな問題ではありません)。重要なことは、IE6との下位互換性を持たせることです。
私はこれを研究し続けるつもりですが、答えを見つけたら投稿しますが、皆さんが提供しなければならない洞察を本当に感謝しています。あなたの時間と洞察に感謝します!
「」要素のみで動作するIE6を除いて、CSSの ':hover'擬似クラスを使うことができるので、JavaScriptを使う必要があります。 jQuery(独自の[ホバー](http://api.jquery.com/hover/)機能を持つ)のようなライブラリを使用することに反対していますか? – nnnnnn
jQuery .hover()メソッドを試してみましたか?詳細については、こちらを参照してください。 –
jQuery .hover()メソッドは、実装するのがかなり簡単ですが、要素に対してクラスをどのようにターゲットにしますか? – DroBuddy