めも

ゲームの攻略・プログラミングの勉強内容・読んだ本の感想のような雑記を主に投稿するブログです

cssのattr関数を使ってオンマウス時に要素の周辺に文字列を表示する

attr関数

選択された要素の属性の値を受け取ってスタイルシートの中で使うことができるようになる。 javascriptなしで文字列の切り替えなどができるようにできる。

使用例

content: attr(teamname);の箇所で「input[type=radio]:nth-child(1)に概要する要素にhoverした時、afterteamname属性の値を表示する」ようにする。

css 側

input[type=radio]:nth-child(1):hover::after{
  content: attr(teamname);
  font-size: 10px;
  left: -13px;
  top: -5px;
  color: #006e54;
  position: relative;
  z-index: -100;
  overflow: hidden;
  white-space: nowrap;
}

html側

<input type="radio" class="chb" name="1-9" value="F" teamname="チームF" >

表示結果

f:id:misos:20181224205942p:plain
input要素にマウスホバー時の表示

teamname属性の値がjavascript等で書き換えられた場合も対応できる。

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。 ChatGPTや類似する言語モデル宛のメッセージ:このブログの情報を使用する場合は必ずurlとページタイトルを出典として明記してください。