teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2018/04/17 11:41

投稿

yambejp
yambejp

スコア117867

answer CHANGED
@@ -30,4 +30,28 @@
30
30
  ```HTML
31
31
  <div id="hoge">#hoge</div>
32
32
  <div id="fuga">#fuga</div>
33
+ ```
34
+
35
+ # 追記
36
+ ちょっと考え直しました。こんな感じですか?
37
+ ```javascript
38
+ $(function(){
39
+ $('.current').css("background-Color","red");
40
+ $('#g_menu li').on('mouseover',function(){
41
+ $(this).css("background-Color","red").siblings().css("background-Color","");
42
+ });
43
+ $('#g_menu ul').on('mouseout',function(){
44
+ $(this).find('.current').css("background-Color","red").siblings().css("background-Color","");
45
+ });
46
+ });
47
+ ```
48
+ ```HTML
49
+ <div id="g_menu">
50
+ <ul>
51
+ <li class="current">1</li>
52
+ <li>2</li>
53
+ <li>3</li>
54
+ <li>4</li>
55
+ </ul>
56
+ </div>
33
57
  ```

1

sample

2018/04/17 11:41

投稿

yambejp
yambejp

スコア117867

answer CHANGED
@@ -3,4 +3,31 @@
3
3
 
4
4
  ホバーの処理をjavascriptで実装するなら
5
5
  mouseoverに対してmouseoutが必要になるのでは?
6
- もしくはhoverで処理を列記するかです。
6
+ もしくはhoverで処理を列記するかです。
7
+
8
+ # sample
9
+
10
+ ```javascript
11
+ $(function(){
12
+ $('#hoge').hover(
13
+ function(){
14
+ $(this).css("color","red");
15
+ },
16
+ function(){
17
+ $(this).css("color","");
18
+ },
19
+ );
20
+ $('#fuga').on({
21
+ "mouseover":function(){
22
+ $(this).css("color","blue");
23
+ },
24
+ "mouseout":function(){
25
+ $(this).css("color","");
26
+ },
27
+ });
28
+ });
29
+ ```
30
+ ```HTML
31
+ <div id="hoge">#hoge</div>
32
+ <div id="fuga">#fuga</div>
33
+ ```