如何在动态生成的提交按钮上悬停时应用CSS类？

Question

我有以下HTML/CSS代码片段，用于根据从数据库检索到的行数显示页面。

.paginate {
    font-family:Arial,Helvetica,sans-serif;
    padding:3px;
    margin:3px;
}

.disableCurrentPage {
    font-weight:bold;
    background-color:#999;color:#FFF; 
    border:1px solid #999;
    text-decoration:none;color:#FFF;
    font-weight:bold;
}

.paging {
    cursor: pointer; 
    background-color: transparent;border:1px solid #999;
    text-decoration:none;
    color:#9CC;
    font-weight:bold;
}

<div class='paginate'>
    <input type="submit" name="btnFirst" value="First" 
           class="disableCurrentPage" disabled="disabled"/>
    <input type="submit" name="btnPrev" value="Previous" class="paging"/>
        
    <input type="submit" name="btnPage" value="1"
           class="disableCurrentPage" disabled="disabled"/>
    <input type="submit" name="btnPage" value="2" class="paging"/>
    <input type="submit" name="btnPage" value="3" class="paging"/>
    <input type="submit" name="btnPage" value="4" class="paging"/>
    <input type="submit" name="btnPage" value="5" class="paging"/>
    <input type="submit" name="btnPage" value="6" class="paging"/>
    <input type="submit" name="btnPage" value="7" class="paging"/>
    <input type="submit" name="btnPage" value="8" class="paging"/>
    <input type="submit" name="btnPage" value="9" class="paging"/>
    <input type="submit" name="btnPage" value="10" class="paging"/>
        
    <input type="submit" name="btnNext" value="Next" class="paging"/>
    <input type="submit" name="btnLast" value="Last" class="paging"/>
</div>

目前没有问题。我希望在鼠标悬停时将以下CSS类应用于所有这些按钮。

.button:hover {
    border:1px solid #999;
    color:#000;
}

那些带有名为btnPage的按钮是在循环中动态生成的。因此，我认为基于id属性应用前面的CSS类不方便。那么，如何在悬停时将此类应用于这些按钮？

- Tiny

Answer 1

添加以下代码

input[type="submit"]:hover {
    border: 1px solid #999;
    color: #000;
}

如果您只需要针对这些按钮，则可以添加ID名称

#paginate input[type="submit"]:hover {
    border: 1px solid #999;
    color: #000;
}

演示

- Sowmya

---

这将针对所有输入，而不是 Tiny 要求的具有 btnPage 名称属性的输入进行操作。 - George Katsanos

@GeorgeKatsanos 他正在要求所有的按钮（我想在鼠标悬停时应用类似以下的 CSS 类到所有这些按钮）。那些带有名称属性 btnPage 的按钮是动态生成的，所以分配类名不是一个好主意，因为你不能为动态生成的按钮设置类名。这就是他所说的。 - Sowmya

他的英语显然不是很好... 我认为他应该澄清一下。如果他想给所有的输入都加上一些样式，那么 #paginate input {} 就可以实现 - 但我不明白他为什么要提到 btnPage 属性的部分.. - George Katsanos

但是它是这样的。CSS将应用于所有元素，即使它们是通过异步调用或其他方式加载的。这就是问题所在。 - George Katsanos

我认为在第二种情况下，# 应该被替换为 .，例如：.paginate input[type="submit"]:hover{border: 1px solid #999;color:#000;}。 - Lion

Answer 2

最有效的选择器是属性选择器。

 input[name="btnPage"]:hover {/*your css here*/}

这是一个实时演示：http://tinkerbin.com/3G6B93Cb。

- George Katsanos

---

当您添加自定义样式 http://tinkerbin.com/noZjmZkA 时，此方法不起作用。在您的页面中显示的结果是按钮默认的悬停样式。 - Sowmya

你改了我的例子，那不是我粘贴的。 - George Katsanos

我已经更改以展示效果。它应该与那种样式一起工作。在您的演示中，如果您删除CSS，它也会产生相同的结果。 - Sowmya

我改变了 URL。问题在于输入元素不应该被 CSS 规则更改。 - George Katsanos

Answer 3

您有两个选项：

1. Extend your .paging class definition:

   .paging:hover {
       border:1px solid #999;
       color:#000;
   }
   

2. Use the DOM hierarchy to apply the CSS style:

   div.paginate input:hover {
       border:1px solid #999;
       color:#000;
   }
   

- strauberry