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

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

サイトのキャプチャ

Middle Box Links

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

デモのキャプチャ

デモページ

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

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

HTML

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

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

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

sponsors

top of page

©2018 coliss