teratail
回答率
85.30%
質問するログイン新規登録
トップjQueryに関する質問onMouseでコメントを表示する

編集履歴

回答編集履歴

5

アイコン形状の変更

2018/08/02 08:51

投稿

FKM
FKM

スコア3662

answer CHANGED
@@ -2,6 +2,8 @@
2
2
  0. 三角形のアイコンを作る。
3
3
  0. position要素とz-index要素を使い、子要素を重ねて配置する。
4
4
 
5
+ 更に三角形を動かしたい位置に動かします。今回はExcel風なので右上隅となります。
6
+
5
7
  ``` html
6
8
  <div class="content">
7
9
  <div class="comment">
@@ -22,13 +24,14 @@
22
24
  z-index: 1;
23
25
  }
24
26
  .tri_icon{
25
- position: absolute;
27
+ 　　　position: absolute;
26
- z-index: 2;
28
+ 　　　z-index: 2;
27
- top: 1px;
29
+ top: 0;
28
- left: 1px;
30
+ left: calc(100% - 20px);
29
- border-top: 10px solid transparent;
31
+ border-top: 10px solid red;
30
- border-bottom: 10px solid transparent;
32
+ border-bottom: 10px solid transparent;
31
- border-left: 14px solid black;
33
+ border-left: 10px solid transparent;
34
+ border-right: 10px solid red;
32
35
  }
33
36
  ```
34
37
 

4

htmlタグの修正

2018/08/02 08:51

投稿

FKM
FKM

スコア3662

answer CHANGED
@@ -2,6 +2,7 @@
2
2
  0. 三角形のアイコンを作る。
3
3
  0. position要素とz-index要素を使い、子要素を重ねて配置する。
4
4
 
5
+ ``` html
5
6
  <div class="content">
6
7
  <div class="comment">
7
8
  　　　　　　<!-- ここにコメントが入る -->

3

解釈違いを修正

2018/08/02 08:44

投稿

FKM
FKM

スコア3662

answer CHANGED
@@ -1,11 +1,9 @@
1
- まずはツールチップに表示する要素を作ります。
1
+ CSSを使います。要点は次の2点です。
2
+ 0. 三角形のアイコンを作る。
3
+ 0. position要素とz-index要素を使い、子要素を重ねて配置する。
2
4
 
3
- ```html
4
- <div class="sub">
5
- <!-- ここの要素に何か行うとイベントが起きる -->
6
- </div>
7
- <div class="tooltips">
8
- <div class="content">
5
+ <div class="content">
6
+ <div class="comment">
9
7
  　　　　　　<!-- ここにコメントが入る -->
10
8
  </div>
11
9
  <div class="tri_icon">
@@ -14,16 +12,8 @@
14
12
  </div>
15
13
  ```
16
14
 
17
- それからCSSを使います。要点は次の3点です。
18
- 0. 三角形のアイコンを作る。
19
- 0. 親要素を隠す。
20
- 0. position要素とz-index要素を使い、子要素を重ねて配置する。
21
-
22
15
  ``` css
23
- .tooltips{
24
- visibility: hidden;
25
- }
26
- .content{
16
+ .comment{
27
17
  width: 100px;
28
18
  height: 80px;
29
19
  background: yellow;
@@ -41,19 +31,4 @@
41
31
  }
42
32
  ```
43
33
 
44
- 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。
45
-
46
- あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
34
+ あとは、jQueryなりJavaScriptなりをつかって、コメントの有無で要素を見せ隠しすればいいだけです。
47
-
48
- ```jQuery
49
- <script>
50
- $(function(){
51
- $('.sub').on("mouseenter",function(){
52
- $('.tooltips').css({"visibility":"visible"});
53
- })
54
- $('.sub').on("mouseleave",function(){
55
- $('.tooltips').css({"visibility":"hidden"});
56
- })
57
- })
58
- </script>
59
- ```

2

文章構成の編集とコメントアウト記号の修正

2018/08/02 08:43

投稿

FKM
FKM

スコア3662

answer CHANGED
@@ -1,4 +1,4 @@
1
- 0. まずはツールチップに表示する要素を作ります。
1
+ まずはツールチップに表示する要素を作ります。
2
2
 
3
3
  ```html
4
4
  <div class="sub">
@@ -6,7 +6,7 @@
6
6
  </div>
7
7
  <div class="tooltips">
8
8
  <div class="content">
9
- 　　　　　　<！-- ここにコメントが入る -->
9
+ 　　　　　　<!-- ここにコメントが入る -->
10
10
  </div>
11
11
  <div class="tri_icon">
12
12
  <!-- ここにCSSで作成した三角形が入る -->
@@ -14,7 +14,10 @@
14
14
  </div>
15
15
  ```
16
16
 
17
+ それからCSSを使います。要点は次の3点です。
18
+ 0. 三角形のアイコンを作る。
19
+ 0. 親要素を隠す。
17
- 0. それからCSSで親要素を隠し、position要素とz-index要素を使い、子要素を重ねて配置し、三角形の部分を作ります。
20
+ 0. position要素とz-index要素を使い、子要素を重ねて配置する。
18
21
 
19
22
  ``` css
20
23
  .tooltips{
@@ -38,8 +41,10 @@
38
41
  }
39
42
  ```
40
43
 
41
- 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
44
+ 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。
42
45
 
46
+ あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
47
+
43
48
  ```jQuery
44
49
  <script>
45
50
  $(function(){

1

アイコンの補足

2018/08/02 08:37

投稿

FKM
FKM

スコア3662

answer CHANGED
@@ -38,14 +38,17 @@
38
38
  }
39
39
  ```
40
40
 
41
- 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、アイコンを使うこともできます。あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
41
+ 説明は一番単純なやり方ですが、応用すれば好きな位置にコメントとアイコンを配置できると思います。アイコンはCSSで作成したり、font awesomeなどからアイコンをダウンロードして使うこともできます。あとは、jQueryなりJavaScriptなりをつかって、イベント実行後に、要素を見せ隠しすればいいだけです。
42
42
 
43
43
  ```jQuery
44
44
  <script>
45
45
  $(function(){
46
46
  $('.sub').on("mouseenter",function(){
47
- $('.tooltips').css({"display":"block"});
47
+ $('.tooltips').css({"visibility":"visible"});
48
48
  })
49
+ $('.sub').on("mouseleave",function(){
50
+ $('.tooltips').css({"visibility":"hidden"});
51
+ })
49
52
  })
50
53
  </script>
51
54
  ```