質問編集履歴
1
該当のソースコードにhtmlを加えました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
### 該当のソースコード
|
|
16
16
|
|
|
17
17
|
```ここに言語名を入力
|
|
18
|
+
jQuery
|
|
18
19
|
$(function(){
|
|
19
20
|
//$(".tooltip").hide();
|
|
20
21
|
$(".tooltip-body").mouseover(function(e){
|
|
@@ -31,6 +32,26 @@
|
|
|
31
32
|
.stop(true,false)
|
|
32
33
|
});
|
|
33
34
|
});
|
|
35
|
+
|
|
36
|
+
html
|
|
37
|
+
<body>
|
|
38
|
+
<div class="tooltip-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Accusamus, provident harum commodi nam fugiat blanditiis natus similique odio minima eius tenetur, facilis sit amet, alias nemo pariatur modi ab facere.</div>
|
|
39
|
+
|
|
40
|
+
// 今回やるのはツールチップです。
|
|
41
|
+
// .tooltip-bodyにマウスが乗ったら、
|
|
42
|
+
// <div class='tooltip' style='display: none;'>description</div>
|
|
43
|
+
// がfadeInし、マウスが外れたらfadeOutする。
|
|
44
|
+
// その際に.tooltipがマウスに追尾する。
|
|
45
|
+
// x座標、y座標の取得方法。
|
|
46
|
+
// function(e) {
|
|
47
|
+
// var x = e.pageX,
|
|
48
|
+
// y = e.pageY;
|
|
49
|
+
// }
|
|
50
|
+
// mousemove マウスが移動している状態を取ります。
|
|
51
|
+
// .hover() マウスが乗った、外れた時のタイミングを取ります。
|
|
52
|
+
// .stop() アニメーションを止めます。引数次第で止め方が変わります。ググりましょう。
|
|
53
|
+
|
|
54
|
+
</body>
|
|
34
55
|
```
|
|
35
56
|
|
|
36
57
|
### 試したこと
|