JSを使わずにaltの出るロールオーバー

質問

いつも参考にさせて頂いております。

今回質問をさせていただいたのは、

ジャバスクリプトを使わずに、altの出るロールオーバーを作る。
これが出来なくて困っています。
altが出れば良いので、html側にimgを貼って、
css側に背景などで出せばいいかと思いましたが、、、
うまくいきません。

どなたか分かる方
ご指導いただけたら幸いです。

よろしくお願いいたします。

回答No.1

steel_gray · ベストアンサー

CSSの仕様としては手はあります。
img{
position:relative;
}
img:hover:before{
display:block;
content:attr(alt);
position:absolute;
background-color:#000;
color:#fff;
top:-0.5em;
right:-0.5em;
}
ただ、Operaぐらいしか対応してない…

素直にJavascriptを使うか、もしも代替テキストでなくて説明だとしたら普通にtitle属性の方が相応しいのかも。
(titleならば多くのブラウザがオンマウスでポップアップ表示します）

お礼

ご回答ありがとうございました。

自分なりに調べた結果、出す方法を見つけましたので、
ここに記しておきます。

もし同じ問題にぶつかった人にの一助になれれば光栄です。

<HTML側>

<div class="botan">
<a href="test.html">
<img src="img/botan.jpg" alt="テキスト" />
</a>
</div>
</div>

<CSS側>
.botan {
width:131px;
height:21px;
float:right;
margin:5px 70px 0px 0px;
_margin:5px 35px 0px 0px;}
.botan a{
width:131px;
height:21px;
display:block;
}
.botan a:hover{
width:131px;
height:21px;
display:block;
background:url(../img/botanro.jpg) no-repeat;}
.botan a:hover img{
visibility:hidden;　/*これが重要でした！*/
}

これなら、一応ＩＭＧをＨＴＭＬ側に貼りますが、
altが出ます。
ロールオーバーした後もaltが出るので、
だいぶ便利かと思います。