質問編集履歴
3
コード変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
```html
|
|
20
20
|
<div class="item">
|
|
21
21
|
<a href="#">
|
|
22
|
-
<div id="text-area">text</div>
|
|
23
22
|
<span class="more-btn">more</span>
|
|
24
23
|
</a>
|
|
25
24
|
</div>
|
|
@@ -42,6 +41,6 @@
|
|
|
42
41
|
}
|
|
43
42
|
.item:hover .more-btn::before{
|
|
44
43
|
width:10px;
|
|
45
|
-
|
|
44
|
+
background-color:#000;
|
|
46
45
|
}
|
|
47
46
|
```
|
2
理想の図を載せる
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
hoverしたら線が伸びるタイプのボタンはどう組むのでしょうか。
|
|
2
2
|
なんとなく、:hoverと::before要素で組むんだまでは辿り着いたのですが、
|
|
3
3
|
真似てもうまくいかず・・・。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
理想として思っている上の図を動かすことで
|
|
4
|
-
|
|
8
|
+
動きは.itemをhover前には6pxの線とmoreが見えて、
|
|
5
9
|
.itemをhoverすると6pxの線が10pxの線になり同時にmoreボタンも4px右に移動した形になることです。
|
|
6
10
|
もちろん、hoverを外したら、元の6px線とmoreボタンの位置に戻っていくという一連の動きが表現したいです。
|
|
7
11
|
線の位置は恐らく今のままで良いです。
|
1
編集・追記の要請に合わせて位置・方向に対する希望を記入
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,7 +4,10 @@
|
|
|
4
4
|
理想として思っている動きは.itemをhover前には6pxの線とmoreが見えて、
|
|
5
5
|
.itemをhoverすると6pxの線が10pxの線になり同時にmoreボタンも4px右に移動した形になることです。
|
|
6
6
|
もちろん、hoverを外したら、元の6px線とmoreボタンの位置に戻っていくという一連の動きが表現したいです。
|
|
7
|
+
線の位置は恐らく今のままで良いです。
|
|
8
|
+
伸びる方向は右へ6pxから10pxまで伸びることですね。
|
|
7
9
|
|
|
10
|
+
|
|
8
11
|
うまく動かないことから間違っているコードを組んでいることはわかりますが、
|
|
9
12
|
どうすれば正しく組めるのか全然糸口もわからない状態です。
|
|
10
13
|
こう組むのよと教えて頂けるととても助かります。
|