コメント システムがあり、各コメントには通常、そのコメントに対する返信の数を表示するボタンがあります。ユーザーがボタンの上にマウスを移動すると、テキストが「3 件の返信」から「返信!」に変わり、マウスをボタンから離すと、テキストが「3 件の返信」に戻るようにしたいと考えています。
コメントごとに返信数が異なるため、単純なマウスオーバー/マウスアウト スクリプトを実行することはできません。回避策の 1 つは、返信数を変数として渡し、それを処理する小さな関数を作成することです。ただし、もっと簡単な方法があるはずです。CSS の :hover を使用してタグのコンテンツ (CSS プロパティ content を使用) を変更しようとしましたが、まだうまくいきません。
ご協力いただければ幸いです。ありがとうございます!
ベストアンサー1
はい、CSS を使用できますcontent。通常のテキストと「返信！」を切り替えるには、通常のテキストを に配置しspan、マウスをホバーすると非表示になります。
button {
width: 6em
}
button:hover span {
display: none
}
button:hover:before {
content: "Reply!"
}<button><span>3 replies</span></button>編集: これは IE8 では動作しますが、互換モードでは動作しないので、IE7 は使用できないと思われます。これは問題でしょうか?