:hover擬似クラスで前景色を変えるスタイル指定を行うとき、:hoverの状態になっても文字列の一部分だけで前景色が変化しないことがある。例えばアンダーラインより下の部分、イタリック体などで右側にはみ出す部分などでこの現象が発生する。
- Category: Mac, Safari, ver.3 Under
- Tag: background, 擬似クラス
例示
<style type="text/css">
<!--
a:link, a:visited {
color: blue;
}
a:hover {
color: red;
}
-->
</style>
<p><a href="./" style="font:200% 'Times New Roman',serif;">gjpqy</a></p>
文字列はTimes New Romanフォントで表示しています。Safariではマウスポインタ等を乗せたときにアンダーラインより下の部分の前景色が赤色にならないそうです。
補足
フォントによって不具合の発生状況が変わるそうです。
- ヒラギノフォント：ディセンダの部分で不具合が発生する。
- Osaka：不具合は発生しない。
- Times New Roman：ディセンダの部分で不具合が発生する。
- VT100：文字の中心より下の領域で不具合が発生する。
また文字列をイタリック体などで表示すると、ノーマルで表示したときに比べて右にはみ出す部分でも同様の現象が発生します。
修正状況
Safari1.2でこの不具合が発生するそうです。
報告書き込み
リンク要素の下線より下にはみ出した部分の文字の色を変えられない（Safari1.2）
a:visited { color: purple; }
a:hover { color: green; }
a:active { color: maroon; }
<a href="">jpg</a>
jやgなどの下線より下にはみ出した部分の色が疑似要素による指定で変えられない。
下線を消しても発生する。
>フォント（の設計）によって結果が異なるかも
試してみたところ、ヒラギノ系では発生しましたがOsakaでは発生しませんでした。
また斜体したり、筆記体のようなフォントにすると左右にはみ出した部分の色が変わらなくなりました。
>>943
フォントによります。Times New Romanでは発生しました。
またどの部分から色が変わらなくなるかはフォントによって違うようです。
VT100だと下線どころか中心から下半分の色が変わりません。
>>944
Hiragino Maru Gothic Pro
Hiragino Kaku Gothic Pro
Hiragino Kaku Gothic Std
Hiragino Mincho Pro
と指定するとヒラギノになります。W3といった文字の太さは指定できませんが。
