css - hovered时更改struts2中checkboxlist中每个元素的背景色

Question

<s:checkboxlist list="fruits" name="selectfruits" listKey="id" listValue="description" id="fruitsid">

假设我有上面的复选框列表，其中包含多个复选框。当鼠标悬停在相应的复选框或其标签上时，我想将背景颜色更改为灰色，将标签颜色更改为白色。我如何通过更改其在 css 中的样式来实现此目的？

我通过引用复选框列表的 id 在 css 文件中尝试了以下操作，但它不起作用:

#fruitsid:hover {
color:white;
background-color:grey;
}

为上述代码生成的 HTML:

<input type="checkbox" name="selectfruits" value="Apple" id="selectfruits-1">Apple
<br/><br/></input> 

<input type="checkbox" name="selectfruits" value="Melon" id="selectfruits-2">Guava 
<br/><br/></input> 

<input type="checkbox" name="selectfruits" value="Orange" id="selectfruits-3">Orange 
<br/><br/></input> 

<input type="checkbox" name="selectfruits" value="Guava" id="selectfruits-4">Grapefruit 
<br/><br/></input> 

<input type="checkbox" name="selectfruits" value="Pineapple" id="selectfruits-5">Melon 
<br/><br/></input> 

有什么方法可以像上面提到的那样引用每个标签并更改其 css 样式？

谢谢!

Answer 1

您可以使用 CSS3 startswith selector :

input[id^="selectfruits"]:hover{
    /* your custom style here */
}

顺便说一句，复选框(和单选按钮也是)是特殊元素，根据浏览器/操作系统呈现不同，并且很难仅使用 CSS 设置样式。

上面的代码片段可以正确定位一个元素(即使是一个复选框或一个单选按钮)，但问题是你不能按照你的要求去做。例如，您可以更改大小或位置，但不能更改颜色/背景颜色，因为它们没有这些属性。

对此有多种解决方案，但最著名的两个是:

1. 隐藏真正的复选框然后显示另一个元素(通常是带有图像的 span):

   这在强制跨浏览器/跨操作系统渲染时使用，和/或当需要显示更好/不同的图形对象时(例如，我使用了带有锁定/解锁符号的复选框)。但我想这不是你的情况。

2. 将复选框包裹在另一个元素(例如 div)中，然后为该元素设置样式:

   这似乎是你的情况。没有必要将它包装在一个 div 中，顺便说一句，复选框旁边的标签元素就足够了。问题是 <s:checkboxlist/>标签为你生成 HTML，没有标签，那么你应该避免使用这个标签，以便能够添加你的自定义 HTML；

   使用在迭代器中生成的单个复选框标记更改您的标记...或仅使用纯 HTML 元素，以保持简单:

   <s:iterator value="fruits" status="ctr"> 
   
       <input type="checkbox" 
              name="selectfruits" 
             class="chkFruits" 
             value="<s:property value='%{id}'/>"
                id="selectfruits-<s:property value='%{#ctr.count}'/>">
   
       <label for="selectfruits-<s:property value='%{#ctr.count}'/>" class="lblFruits">
           <s:property value='%{description}'/>
       </label>
   
       <br/><br/>
   </s:iterator>
   

   这将生成以下输出，您可以使用标准选择器设置样式:

.chkFruits:hover + .lblFruits {
  background-color: blue;
  color: white;
}

<input type="checkbox" name="selectfruits" value="AWARD" 
       id="selectfruits-1" class="chkFruits" />
<label for="selectfruits-1"  class="lblFruits">Apple</label>
<br/><br/>

<input type="checkbox" name="selectfruits" value="CLIST" 
       id="selectfruits-2" class="chkFruits" />
<label for="selectfruits-2"  class="lblFruits">Guava</label>
<br/><br/>

<input type="checkbox" name="selectfruits" value="HAN" 
       id="selectfruits-3" class="chkFruits" />
<label for="selectfruits-3"  class="lblFruits">Orange</label>
<br/><br/>

<input type="checkbox" name="selectfruits" value="POS" 
       id="selectfruits-4" class="chkFruits" />
<label for="selectfruits-4"  class="lblFruits">Melon</label>
<br/><br/>