トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(1)<FirstTitle>:JavaFXデモ/Sceneの遷移 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/うるう年 <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [00000206]  <Date>: 2021/10/20 22:53:15
<Title>: CSSデモ/吹き出し
<Name>: amanojaku@管理人



マウスカーソルを「!」にマウスオーバーすると吹き出しが表示されます。

実際のページ
http://xd305417.html.xdomain.jp/demo/CSS_Balloon001.htm


<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <TITLE></TITLE>
    <style>
.Display_InlineBlock {
  display: inline-block;
}
.Display_InlineFlex{
  display: inline-flex;
}
.Position_Relative {
  position: relative;
}
.Flexbox_MiddleCenter {
  align-items: center;
  justify-content: center;
}
.EdgeRadius_50per{
  border-radius: 50%;
}
.EdgeCircle {
  border-radius: 50%;
  width: 1.5rem;
}
.BalloonBox {
  display: none;
  z-index: 1;
  position: absolute;
  background: #def;
  color: #000;
  border: thin solid #000;
  border-radius: 0.5rem;
  padding: 0 0.5rem;
  white-space: nowrap;
}
.BalloonVisibility:hover .BalloonBox {
  display: inline-block;
}
.BalloonLabel {
  color: #fff; 
  background-color: #f70;
}
    </style>
  </head>
  <body>
QWERTY<span class="BalloonContainer BalloonVisibility" ><span class="BalloonBox">Balloon Box Text</span><span class="Display_InlineFlex Flexbox_MiddleCenter BalloonLabel EdgeCircle" >!</span></span>
QWERTY<span class="BalloonContainer BalloonVisibility" ><span class="BalloonBox">Balloon Box Text</span><span class="Display_InlineFlex Flexbox_MiddleCenter BalloonLabel EdgeCircle" >!</span></span>
  </body>
</html>

Block( Address 00000212 Identity 00000206 )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.