テキストと画像を入れ替えるスクリプトを教えてください。
ホバー時にテキストリンクを画像に入れ替えたいです。
できれば、それにプラスしてアンダーラインがアニメーションで出てくると嬉しいのです。
アンダーラインのアニメーションはCSSで一旦作りましたが、CSSだけだと画像の入れ替えができなくて困っています。
という質問をしたところ、CSSのみでできると言われましたが、できるのでしょうか。
アンダーラインを引く時にbackgroundを使用しているため、画像をbackgroundで入れることができないのですが、どういう手段で画像を入れるんでしょうか。content？
雑魚でわかりませんので教えてください。
みんなの回答 8 件
じゃぁ逆に聞くけれど、なんで CSS で出来ないの？
ヒント = 擬似要素 ( E:hover <-こういうのね )
今作ってるものを見せた方が早いと思いますよ
背景画像は複数指定できるよ。JS使うにしても、JSからCSSいじるだけだから、早い話、CSS分かんなきゃどーにもならないよ。
HTML
<div>
<div id="navi">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Access</a></li>
</ul>
</div>
</div>
-----
CSS
#navi ul li a::after {
content: ’’;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
background-color: #000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#navi ul li a:hover::after {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
置く画像はリンクそれぞれで異なります。
テキストサイズと同じheightの画像＋CSSアンダーラインとなるため、背景複数設定の場合はアンダーラインを画像にしないといけない、もしくはliの中にspanか何かで要素を入れる必要がある、ような気がしています。
HTMLに装飾のための画像をおきたくないのでCSSで設定したいのですが、これまでbackgroundもしくは::after、::beforeによる挿入しかしたことがないため他の方法がわかりません。
> CSSのみでできると言われましたが、できるのでしょうか。
回答信じないなら聞く意味なくない？
なんだこのソース・・・。ul と li の要素が他のに変わったら終わりじゃん・・・。
ソースを載せるべきと言われたので載せましたが、載せても回答にならないコメントばかりで残念です。
上の方がbeforeがないといっていますが、beforeで画像を挿入すればいいということ？
すみませんが、回りくどい言い方をされると余計混乱します。
真面目に質問をしています。
トピ主は自分で「これまでbackgroundもしくは::after、::beforeによる挿入しかしたことがない」と言っているが、このソースは「::afterによる挿入」しかしていない。
ということは、「backgroundによる挿入」をする余地はあるのではないか？
今のアンダーラインは::afterで挿入したものにbackgroundを指定しているとはいえ、要素本体にbackgroundで画像を指定すれば画像を表示させることはできる。その際どうやってテキストを消せばいいかは調べればいくらでも出てくる。
ちなみに、前のコメントにもあるようにbackgroundは複数指定できるし、実は::beforeや::afterも複数作ることができる。
関連するトピックス