解説
| キーワード |
用途 |
| hover |
マウスオーバー |
| append() |
要素の挿入 |
| html() |
HTMLの内容の変更 |
| children() |
子要素の取得 |
| attr() |
属性の設定 |
| hide() |
非表示 |
| fadeIn |
フェードイン |
| stop() |
アニメーションの中止 |
| css() |
スタイルシートの設定 |
| offset() |
位置の取得 |
| height() |
高さの取得 |
| width() |
幅の取得 |
| remove() |
要素の削除 |
- コンテンツのつくりかた
-
- アイコンにマウスオーバーで実行する
- ツールチップを表示する
- ツールチップの位置を調整する
- マウスアウトでツールチップを非表示にする
HTML
ここには、HTMLのコードを入れる
<ul class="dot_list">
<li><img src="../../../images/dot/blade.png" alt="blade"></li>
<li><img src="../../../images/dot/allow.png" alt="allow"></li>
<li><img src="../../../images/dot/ax.png" alt="ax"></li>
</ul>
CSS
ここには、CSSのコードを入れる
/*ツールチップ*/
.dot_list{
display:flex;
flex-direction:row;
margin:0 auto;
width:600px;
}
.dot_list li{
margin:60px 10px;
width:180px;
background:#000;
position:relative;
}
.dot_list li:hover{
box-shadow:2px 2px 10px #000;
}
.dot_list img{
width:100%;
height:auto;
}
#tooltip{
padding:0.5em;
position:absolute;
border-radius:5px;
background:#7E9374;
color:#E5DECA;
}
#tooltip::after{
content: '';
margin-left:-8px;
border:8px solid transparent;
border-top:18px solid #7E9374;
border-bottom:0;
position:absolute;
left:50%;
}
JS
ここには、JSのコードを入れる
//ツールチップ
$(function(){
//
$(".dot_list li").hover(function(){
$("body").append('<div id="tooltip"><p></p></div>');
$("#tooltip p").html($(this).children().attr("alt"));
/*ツールチップを非表示にする*/
$("#tooltip").hide();
$("#tooltip").stop().fadeIn();
$("#tooltip").css("top", $(this).offset().top - $("#tooltip").height() - 30);
$("#tooltip").css("left", $(this).offset().left - ($("#tooltip").width() - $(this).width())/2);
},function(){
/*マウスカーソルが離れたらツールチップを削除*/
$("#tooltip").remove();
});
});/*function*/
