悬停时更改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 设置样式。

上面的 sn-p 可以正确地定位一个项目（甚至是一个复选框或一个单选按钮），但问题是你不能按照你的要求去做。例如，您可以更改大小或位置，但不能更改颜色/背景颜色，因为它们没有这些属性。

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

1. 隐藏真正的复选框，然后显示另一个元素（通常是带有图像的跨度）：

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

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/>

Answer 2

此答案适用于我的网页中的所有检查！

input[type="checkbox"]:hover + label {
    color: #fff;
    border-color: #1b7aa9;
    background-color: #239fdb;
}