文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 吹き出しのデザイン > マウスが乗ると吹き出しを表示

マウスが要素に乗ったとき吹き出しを表示

テキストや画像にマウスが乗ったときに吹き出しを表示させることができます。

当ページでは簡単操作で吹き出しをいろいろな位置に表示させることが出来ます。
生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

いろいろな位置に吹き出しを表示してみよう

吹き出しの作成については以下をご確認ください。
CSSのみで吹き出しを作成

吹き出しの表示位置
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
マウスを乗せてください 吹き出しが表示される
使用したhtml
<div class="balloonoya">マウスを乗せてください
  <span class="balloon">吹き出しが表示される></span>
</div>
生成したCSS
.balloon {
  position: relative;                   /* 指定した分だけ相対的に移動 */
  padding: 10px;                        /* テキストの前後の余白 */
  background-color: rgba(102, 102, 255, 0.50);  /* 背景色(透明度) */
  width:300px;                          /* 吹き出し全体の幅 */
  left : 50%;                           /* 表示位置 */
  transform: translate(-50%);           /* 表示位置の調整 */
}
.balloon:after{
  border-right: 20px solid rgba(102, 102, 255, 0.50);  /* 吹き出し口の幅・色 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ1/2 */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ1/2 */
  left: -20px;                            /* 吹き出し口の位置調整 */
  top : 50%;                         /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
ページTOP
広告
広告

マウスオーバーで吹き出しを表示の例

吹き出しはいろいろな方法で表示できます。

マウスオーバーで回転して吹き出しを表示

マウスを乗せてください 吹き出しが表示される
<div class="sample1Oya">マウスを乗せてください
  <span class="sample1">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample1oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.sample1oya:hover .sample1 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample1 {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 102, 255, 0.50);  /* 背景色(透明度) */
  width: 180px;                         /* 吹き出し全体の幅 */
  left : -1%;                           /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample1Anime 1s linear;
}
.sample1:after{
  border-left: 12px solid rgba(255, 102, 255, 0.50);  /* 吹き出し口の幅・色 */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ1/2 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ1/2 */
  right: -12px;                           /* 吹き出し口の位置調整 */
  top : 5%;                               /* 吹き出し口の縦位置 */
  content: "";                            /* コンテンツの挿入 */
  position: absolute;                     /* 親要素を基準 */
}
@keyframes sample1Anime{
 100% { transform: rotate(360deg); }      /* 回転を指定 */
}
</style>
ページTOP

マウスオーバーでゆっくり吹き出しを表示

マウスを乗せてください 吹き出しが表示される
<div class="sample2Oya">マウスを乗せてください
  <span class="sample2">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample2oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.sample2oya:hover .sample2 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample2 {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 127, 127, 0.75);  /* 背景色(透明度) */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  top : 100%;                           /* 表示位置 */
  margin-top : 12px;                    /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample2Anime 1s linear;
}
.sample2:after{
  border-bottom: 12px solid rgba(255, 127, 127, 0.75);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅1/2 */
  border-right: 10px solid transparent;  /* 吹き出し口の幅1/2 */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left : 5%;                         /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
@keyframes sample2Anime{
 100%{ color : black; background:rgba(255, 127, 127, 0.75) }
  50%{ color : black; background:rgba(255, 127, 127, 0.25) }
   0%{ color : white; background:white   }
}
</style>
ページTOP

マウスオーバーで横回転して吹き出しを表示

マウスを乗せてください 吹き出しが表示される
<div class="sample3Oya">マウスを乗せてください
  <span class="sample3">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample3oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.sample3oya:hover .sample3 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample3 {
  display: none;                       /* 要素を非表示 */
  position: absolute;                  /* 親要素を基準 */
  padding: 2px;                        /* テキストの前後の余白 */
  background-color: rgba(127, 127, 0, 0.75);  /* 背景色(透明度) */
  width:180px;                         /* 吹き出し全体の幅 */
  right : -1%;                         /* 表示位置 */
  font-size: 80%;                      /* 文字サイズ */
  animation: sample3Anime 1s linear;
}
.sample3:after{
  border-right: 12px solid rgba(127, 127, 0, 0.75);  /* 吹き出し口の高さ・色 */
  border-bottom: 10px solid transparent; /* 吹き出し口の幅1/2 */
  border-top: 10px solid transparent;    /* 吹き出し口の幅1/2 */
  left: -12px;                           /* 吹き出し口の位置調整 */
  top : 5%;                              /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
@keyframes sample3Anime{
 100% { transform: rotateY(360deg); }  /* 横回転を指定 */
}
</style>
ページTOP

マウスオーバーで縦回転して吹き出しを表示

マウスを乗せてください 吹き出しが表示される
<div class="sample4Oya">マウスを乗せてください
  <span class="sample4">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample4oya {
  position   : relative;               /* 指定した分だけ相対的に移動 */
}
.sample4oya:hover .sample4 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample4 {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(102, 255, 102, 0.75);  /* 背景色(透明度) */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  bottom : 100%;                        /* 表示位置 */
  margin-bottom : 12px;                 /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample4Anime 1s linear;
}
.sample4:after{
  border-top: 12px solid rgba(102, 255, 102, 0.75);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅1/2 */
  border-right: 10px solid transparent;  /* 吹き出し口の幅1/2 */
  bottom: -12px;                         /* 吹き出し口の位置調整 */
  left : 5%;                             /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
@keyframes sample4Anime{
 100% { transform: rotateX(360deg); }   /* 縦回転を指定 */
}
</style>
ページTOP

注意事項

当ページの吹き出しは、CSSのみで作成しています。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン