リストの箱にカーソルを合わせたときにリンクを機能させたいです

前提・実現したいこと

リストの箱にカーソルを合わせた時にリンク先に飛べて、かつ順番通りにリストを並べたいです。

発生している問題・エラーメッセージ

web上にアップロードされているリスト(CSS)にリンクを付けようとしても文字部分しかリンクとして機能しなくなるか、箱部分もリンク先に飛べるようになる代わりにリストの番号が全て1になります。![List3の文字の上にカーソルを合わせなきゃリンク先に飛べない状態](e80d5ac43d5d0d6ad0f057927c647e71.png)![箱の上にカーソルを合わせたらリンク先に飛べるものの、番号が全て1になっている状態](6275fec73250dec607dd856885058d5f.png)※List4は何もリンク先を付けていない普通の状態です。

該当のソースコード

CSS
1ul.sample1{
2  counter-reset:li;
3  font: 20px/1.6 'arial narrow', sans-serif;
4  list-style: none;
5  padding:0;
6}
7ul.sample1 li{
8  position: relative;
9  width:500px;
10  font-weight: bold;
11  line-height: 80px;
12  margin: 10px 0;
13  padding-left: 40px;
14  -webkit-transition: 0.3s;
15  -moz-transition: 0.3s;
16  -o-transition: 0.3s;
17  -ms-transition: 0.3s;
18  transition: 0.3s;
19}
20ul.sample1 li:nth-child(4n+1){
21  border:dashed 1px #FFA79F;
22}
23ul.sample1 li:nth-child(4n+2){
24  border:dashed 1px #fbaf5d;
25}
26ul.sample1 li:nth-child(4n+3){
27  border:dashed 1px #9FCDFF;
28}
29ul.sample1 li:nth-child(4n+4){
30  border:dashed 1px #AFEBB6;
31}
32ul.sample1 li:before{
33  counter-increment: li;
34  content: counter(li);
35  position: absolute;
36  left: -1px;
37  color: #fff;
38  text-align: center;
39  line-height: 30px;
40  width: 30px;
41  height: 30px;
42  top: 50%;
43  -moz-transform: translateY(-50%);
44  -webkit-transform: translateY(-50%);
45  -o-transform: translateY(-50%);
46  -ms-transform: translateY(-50%);
47  transform: translateY(-50%);
48}
49ul.sample1 li:nth-child(4n+1):before{
50  background: #FFA79F;
51}
52ul.sample1 li:nth-child(4n+2):before{
53  background: #fbaf5d;
54}
55ul.sample1 li:nth-child(4n+3):before{
56  background: #9FCDFF;
57}
58ul.sample1 li:nth-child(4n+4):before{
59  background: #AFEBB6;
60}
61ul.sample1 li:hover{
62  color:#fff;
63  overflow: hidden;
64  z-index: 1;
65}
66ul.sample1 li:nth-child(4n+1):hover{
67  background: #FFA79F;
68}
69ul.sample1 li:nth-child(4n+1):hover:before{
70  background: #fff;
71  color: #FFA79F;
72}
73ul.sample1 li:nth-child(4n+2):hover{
74  background: #fbaf5d;
75}
76ul.sample1 li:nth-child(4n+2):hover:before{
77  background: #fff;
78  color: #fbaf5d;
79}
80ul.sample1 li:nth-child(4n+3):hover{
81  background: #9FCDFF;
82}
83ul.sample1 li:nth-child(4n+3):hover:before{
84  background: #fff;
85  color: #9FCDFF;
86}
87ul.sample1 li:nth-child(4n+4):hover{
88  background: #AFEBB6;
89}
90ul.sample1 li:nth-child(4n+4):hover:before{
91  background: #fff;
92  color: #AFEBB6;
93}
94

該当のソースコード

HTML
1<ul class="sample1">
2<li>List1</li>
3<li>List2</li>
4<li>List3</li>
5<li>List4</li>
6</ul>

試したこと

<li><a href="ooo"> <a href="ooo"><li> の2通り試しましたが1個目は文字部分しかリンク先に飛べず、2個目はリスト番号が全て1になります。

AsukaKobayashi

2021/02/09 09:27

「発生している問題・エラーメッセージ」がコード用の記号で囲まれているため、画像等の確認が難しくなっています。その部分は通常の本文入力として書いていただけると分かりやすいです。

行動規範の内容に同意します

回答3件

liについているスタイルを、liの中のaに当ててみるのはどうでしょうか。

liにはposition:relativeとwidth:500pxだけを残し、
aにはdisplay:blockを追加したうえで、liに当たっていた残りのスタイルを当てる。

それから::beforeにpointer-events: noneを当ててあげれば、beforeで出している数字をクリックしてもリンクをクリックしたことになりますよ。

liの中にa

HTML
1
2<li><a href="ooo">List1</a></li>
3

#CSSの変更する箇所

CSS
1
2ul.sample1 li {
3  position: relative;
4  width:500px;
5}
6ul.sample1 li a{
7  display: block;
8  font-weight: bold;
9  line-height: 80px;
10  margin: 10px 0;
11  padding-left: 40px;
12  -webkit-transition: 0.3s;
13  -moz-transition: 0.3s;
14  -o-transition: 0.3s;
15  -ms-transition: 0.3s;
16  transition: 0.3s;
17}
18ul.sample1 li:before{
19  pointer-events: none;
20  counter-increment: li;
21  content: counter(li);
22  position: absolute;
23  left: -1px;
24  color: #fff;
25  text-align: center;
26  line-height: 30px;
27  width: 30px;
28  height: 30px;
29  top: 50%;
30  -moz-transform: translateY(-50%);
31  -webkit-transform: translateY(-50%);
32  -o-transform: translateY(-50%);
33  -ms-transform: translateY(-50%);
34  transform: translateY(-50%);
35}
36