質問編集履歴

3

コード変更

2017/12/10 11:01

投稿

moreenbi
moreenbi

スコア11

test CHANGED
File without changes
test CHANGED
@@ -39,8 +39,6 @@
39
39
  <div class="item">
40
40
 
41
41
  <a href="#">
42
-
43
- <div id="text-area">text</div>
44
42
 
45
43
  <span class="more-btn">more</span>
46
44
 
@@ -86,7 +84,7 @@
86
84
 
87
85
  width:10px;
88
86
 
89
- backgroud-color:#fff;
87
+ background-color:#000;
90
88
 
91
89
  }
92
90
 

2

理想の図を載せる

2017/12/10 11:01

投稿

moreenbi
moreenbi

スコア11

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,15 @@
4
4
 
5
5
  真似てもうまくいかず・・・。
6
6
 
7
+
8
+
9
+ ![イメージ説明](ae08f846af874d08a3b3770c4f68c23f.png)
10
+
11
+
12
+
13
+ 理想として思っている上の図を動かすことで
14
+
7
- 理想として思っている動きは.itemをhover前には6pxの線とmoreが見えて、
15
+ 動きは.itemをhover前には6pxの線とmoreが見えて、
8
16
 
9
17
  .itemをhoverすると6pxの線が10pxの線になり同時にmoreボタンも4px右に移動した形になることです。
10
18
 

1

編集・追記の要請に合わせて位置・方向に対する希望を記入

2017/12/10 10:53

投稿

moreenbi
moreenbi

スコア11

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,12 @@
9
9
  .itemをhoverすると6pxの線が10pxの線になり同時にmoreボタンも4px右に移動した形になることです。
10
10
 
11
11
  もちろん、hoverを外したら、元の6px線とmoreボタンの位置に戻っていくという一連の動きが表現したいです。
12
+
13
+ 線の位置は恐らく今のままで良いです。
14
+
15
+ 伸びる方向は右へ6pxから10pxまで伸びることですね。
16
+
17
+
12
18
 
13
19
 
14
20