hover時にborder部分に三角(▽△)が出るのを画像を使わずに実現する
タイトルがひど過ぎて何の事言ってるのかさっぱりわからないので、画像で説明。リンクにオンマウス(hoverですね)すると、↓みたいな▽が出たりするヤツ。たまにみる。それを画像を使わずに実現する。
ソース
cssを少し変更しました。 floatで横並びにしてたのを、inline-block要素にして、横並びにする様にしました。
こんなhtmlに
<ul id="menulist"> <li><a href="#" title="リンク1">リンク1</a> <li><a href="#" title="リンク2">リンク2</a> <li><a href="#" title="リンク3">リンク3</a> </ul>
こんなcssで
#menulist { list-style-type: none; } #menulist li { display: inline-block; text-align: center; position: relative; line-height: 50px; width: 100px; height: 50px; border: solid 1px #ddd; margin-left: -1px; } #menulist li a { display: inline-block; width: 100px; height: 50px; text-decoration: none; } #menulist li a:hover:before { border-top: solid 10px #ddd; border-bottom: 0; border-left: solid 10px transparent; border-right: solid 10px transparent; width: 0; height: 0; content: ''; position: absolute; left: 40px; } #menulist li a:hover:after { border-top: 0; border-bottom: solid 10px #ddd; border-left: solid 10px transparent; border-right: solid 10px transparent; width: 0; height: 0; content: ''; position: absolute; left: 40px; bottom: 0px; }
こうなる。
DEMO
:before擬似要素、:after擬似要素使ってるので、IE6、IE7ではアウトだけど、その他は問題無いはず。*1
参考にさせてもらったエントリ
っていうか、ほとんどパクってるんじゃないかっていう…(;^ω^)
枠線付きの吹き出し - Hail2u
画像を一切使わずにCSSだけで吹き出しツールチップを実装する | CSS-EBLOG
三角になる理屈は、CSS-EBLOGさんの記事を読むと理解出来た。
宿題
垂直板の宿題も対応済み。単にソース間違ってただけだという…(;´Д`) 理解出来たって、理解出来てねーよ!ハァ…
水平版は簡単に出来た*2んで、垂直版(垂直方向に並んだリンクリストで、左右に▽を出す)も簡単にいけるだろうとタカをくくってたんだけど、なんかうまくいかないので、垂直板は後日の宿題にする。って、このままほったらかしにしそうだけど…