如何讓Li可點擊內部的單選按鈕

Question

試圖創建一個有趣的表單。這是我到目前爲止有：

>JSFiddle<

>JSBin<

>Codepen<

的HTML：

<form> 
    <ul> 
     <li> 
      <input type="radio" name="opinions" id="radio-1" /> 
      <label for="radio-1"></label> 
      <label for="radio-1">Latest</label> 
     </li> 
     <li> 
      <input type="radio" name="opinions" id="radio-2" /> 
      <label for="radio-2"></label> 
      <label for="radio-2">Random</label> 
     </li> 
     <li> 
      <input type="radio" name="opinions" id="radio-3" /> 
      <label for="radio-3"></label> 
      <label for="radio-3">Favorites</label> 
     </li> 
     <li> 
      <input type="radio" name="opinions" id="radio-4" /> 
      <label for="radio-4"></label> 
      <label for="radio-4">Most Views</label> 
     </li> 
     <ul> 
</form> 

和CSS：

/*hide button & text label*/ 
input[type="radio"], input[type="radio"] + label + label { 
    display: none; 
} 

/*Hide list bullets*/ 
ul { 
    list-style: none; 
} 

/*Push label text down so it's not on image*/ 
input[type="radio"] + label + label { 
    padding-top: 20px; 
} 

/*display text label on hover*/ 
input[type="radio"]:hover + label + label, input[type="radio"] + label:hover + label,  input[type="radio"] + label + label:hover, ul li:hover { 
    display: block; 
    color: white; 
    width: 90px; 
} 

ul li { 
    display: block; 
    float:left; 
    height: 60px; 
    width: 50px; 
    text-align: center; 
    border: 1px solid cyan; 
    background: #555; 
} 

/*display picture that acts as radio button*/ 
input#radio-1+label { 
    background: url('http://s30.postimg.org/53vskoxfl/time_added.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 
/*change image color on hover & selected*/ 
input#radio-1:checked+label, input#radio-1:hover+label { 
    background: url('http://s30.postimg.org/4jgri0475/time_added_selected.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 
input#radio-2+label { 
    background: url('http://s30.postimg.org/ew3242xq9/random.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 
input#radio-2:checked+label, input#radio-2:hover+label { 
    background: url('http://s30.postimg.org/cu2kptzr5/random_selected.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 
input#radio-3+label { 
    background: url('http://s30.postimg.org/c1uutip8h/favorites.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 
input#radio-3:checked+label, input#radio-3:hover+label { 
    background: url('http://s30.postimg.org/uiubhgbi9/favorites_selected.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 
input#radio-4+label { 
    background: url('http://s30.postimg.org/on0du1w75/views.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 
input#radio-4:checked+label, input#radio-4:hover+label { 
    background: url('http://s30.postimg.org/3re3it001/views_selected.png') no-repeat; 
    background-size: 30px 30px; 
    padding-left: 30px; 
    padding-bottom: 30px; 
    vertical-align: top; 
} 

所以我非常接近我的目標。與頂部菜單鏈接>wallhaven<的風格相同。但是，我想將其變爲無線電選項，您可以在其中選擇一個選項。如果可能的話，我也想避免使用javascript。

問題：

1. 鋰是不完全選擇/ hoverable。我怎樣才能解決這個問題。這是主要問題。
2. 此外，我不相信我必須使用列表，而只是使用單選按鈕。無法弄清楚如何避免這種情況。無論如何避免使用列表？
3. 加載圖像真的是重複的。無論如何限制重複？

謝謝大家！

Answer 1

1. 你不能讓li元素選擇你的收音機而不使用JavaScript。該元素在設計時是靜態的（僅用於呈現）。您可以使用標籤來選擇一個單選按鈕，但要管理其狀態（並因此可視化表示），您必須參考JavaScript。
2. 你不必使用列表，你可以堆積labels和收音機，就像我的分叉代碼：http://codepen.io/anon/pen/dPYaMj。我也爲你清理它，並通過jQuery的一些幫助使它工作得更好一些。
3. 基本上有兩種選擇：您可以使用圖片精靈或圖標字體（有很多免費的，有些可以根據您的需要定製）。