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

BTW复选框（和radiobuttons也是）特殊项目，基于浏览器/操作系统进行不同的渲染，并且很难仅使用CSS进行样式化。

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

有几个解决方案，但最着名的两个是：

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

当必须使用crossbrowser / cross-OS渲染时，和/或需要显示更好/不同的图形对象时使用（例如，我使用了带锁定/解锁符号的复选框）。但我想这不是你的情况。
将复选框包装在另一个元素（例如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/>

悬停时，更改struts2中checkboxlist中每个元素的背景颜色

1 个答案: