回答編集履歴
3
説明の改善
answer
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
変化するようになります。ただし、ラインの上にピッタリとマウスカーソルを載せないと反応しないです。ラインの高さが2pxしかないのでなかなか難しいですね。
|
|
13
13
|
|
|
14
14
|
反応する高さを広げるには、span要素に適切な高さと幅を設定します。ただし、spanはインライン要素なので中身がないと高さも幅も0になりますので、`display: inline-block;`でインラインブロック要素に変換します。
|
|
15
|
-
::before疑似要素の幅は100%にします。
|
|
15
|
+
::before疑似要素の幅は100%にします。::after疑似要素は right で右端に配置します。
|
|
16
16
|
これで、:hover に幅を設定すれば矢印が伸びます。
|
|
17
17
|
|
|
18
18
|
```css
|
2
コードにコメント追加
answer
CHANGED
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
position: relative;
|
|
21
21
|
transition:all 1s ease-out;
|
|
22
22
|
opacity:0.3;
|
|
23
|
-
display: inline-block;
|
|
23
|
+
display: inline-block; /*追加*/
|
|
24
|
-
width: 50px;
|
|
24
|
+
width: 50px; /*追加*/
|
|
25
|
-
height: 20px;
|
|
25
|
+
height: 20px; /*追加*/
|
|
26
26
|
}
|
|
27
27
|
.view-more-hover::before{
|
|
28
28
|
content: "";
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
position: absolute;
|
|
31
31
|
top: 8px;
|
|
32
32
|
left: 0px;
|
|
33
|
-
width: 100%;
|
|
33
|
+
width: 100%; /*修正*/
|
|
34
34
|
height: 2px;
|
|
35
35
|
background: #666;
|
|
36
36
|
}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
display: block;
|
|
40
40
|
position: absolute;
|
|
41
41
|
top: 0;
|
|
42
|
-
right: 1px;
|
|
42
|
+
right: 1px; /*修正*/
|
|
43
43
|
width: 15px;
|
|
44
44
|
height: 15px;
|
|
45
45
|
border: 2px solid;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
|
|
50
50
|
.view-more-hover:hover{
|
|
51
51
|
opacity:1;
|
|
52
|
-
width: 200px;
|
|
52
|
+
width: 200px; /*追加*/
|
|
53
53
|
}
|
|
54
54
|
```
|
|
55
55
|
|
1
サンプルリンク追加
answer
CHANGED
|
@@ -51,4 +51,6 @@
|
|
|
51
51
|
opacity:1;
|
|
52
52
|
width: 200px;
|
|
53
53
|
}
|
|
54
|
-
```
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/gOryZVB)
|