[JS]マウスホバーでボックスの真ん中にリンクを表示するスクリプト -Middle Box Links

コンテンツボックスにマウスをホバーすると、ちょうど真ん中にリンクが表示されるチュートリアルをCSS-Tricksから紹介します。

Middle Box Links

デモページではdiv要素で配置された四つのコンテンツボックスにマウスをホバーすると、真ん中にリンクが表示されます。

デモページ

四つのコンテンツボックスは高さが異なりますが、リンク箇所はそれぞれの真ん中に配置されています。

HTMLはシンプルでdiv要素のコンテンツボックスにp要素でテキストを配置しているだけです。

HTML

<div class="widget widget-one rounded">

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>

スタイルシートではCSS3も使用されており、角丸やオーバーレイ時のRGBaのスタイルを適用しています。

スクリプトのベースにはjQueryが使用されており、ホバー時のアクションが実装されています。

元サイトにも記されていますが、マウスを操作しないとリンクが表示されない、ホバーすると元のテキストが読みにくい、といったUI的な問題もありますが、うまく利用できると面白いものができるかもしれません。