1


0

javascriptを使用してテキストオーバーの特定の場所にテキスト/情報を表示する方法

これまでのところ、http://www.baelkopat.com/GECCo/goingGreenTest.htmlがあります。 私が学ぶ必要があるのは、ユーザーがリンクを「mouseOver」したときに追加のテキストを表示する方法です。 i.e. ユーザーが「Activity Guide(PDF)」で「mouseOver」を選択すると、「Download and print …​.」が表示されます。 JavaScriptにはそれほど新しいものではないActionScriptの経験がかなりあります。 「mouseOver」エフェクトをどのように実現するのか疑問に思っていました。

ホバーdivはcssを使用して作成されます

overTextA \ {

position:absolute;
left:190px;
top:7px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;

}

overTextB \ {

position:absolute;
left:190px;
top:40px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;

}

そしてHTMLで

 Download and print a PDF-version of the Junior Going Green with GECCo guide, with activity information, instructions, and resources.

 Take the GECCo Challenge ! Help our planet by saving energy AND earning money for conservation.

それが最善の方法であるかどうかはわかりませんが、とりあえず、navリンクの「mouseOver」のときに適切なテキストを表示する機能するバージョンを使いたいだけです。

ありがとう、レックス

1 Answer


0


jQueryのようなライブラリを使用して、簡単にこれを実現できます。 以下に、 `.hover()`関数を使用して順を追って説明するチュートリアルを示します。

説明:

ホバー要素にクラスを追加/削除し、追加すると表示され、削除または非表示にするとテキスト要素が削除されます。 jQueryは、JSにあまり飛び込みたくない場合に非常に便利です。 それが役立つことを願っています!