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

【问题标题】：How to apply a CSS class on hover to dynamically generated submit buttons?如何在悬停时将 CSS 类应用于动态生成的提交按钮？
【发布时间】：2013-02-21 00:37:33
【问题描述】：

我有以下 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类是不方便的。

那么，如何将此类应用于悬停按钮？

【问题讨论】：

标签： html css hover mousehover

【解决方案1】：

添加以下代码

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

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

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

DEMO

【讨论】：

这将针对所有输入，而不是 Tiny 要求的具有 btnPage 名称属性的输入。
@GeorgeKatsanos 他要求所有按钮（我想在鼠标悬停时将类似以下的 CSS 类应用于所有这些按钮。）。那些具有名称属性 btnPage 的按钮是动态生成的，因此分配类名不是一个好主意，因为您不能为动态生成的按钮提供类名。他就是这么说的
嗯，他的英语显然不是很完美。我认为他应该澄清一下。如果他希望所有输入都具有某种样式，那么#paginate input {} 会这样做 - 但我不明白他为什么必须提到名称 btnPage 属性部分..
@GeorgeKatsanos :) 他的问题很清楚。他之所以提到 btnPage 属性是因为它是动态生成的，因此无法使用类名设置按钮的样式。
但确实如此。 CSS 将应用于所有元素，即使它们是通过异步调用或其他方式加载的。就是这样。

【解决方案2】：

你有两个选择：

扩展您的 .paging 类定义：

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

使用 DOM 层次结构来应用 CSS 样式：

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

【讨论】：

【解决方案3】：

您可以使用的最高效选择器是attribute selector。

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

这是一个现场演示：http://tinkerbin.com/3G6B93Cb

【讨论】：

添加自定义样式时不起作用tinkerbin.com/noZjmZkA页面中显示的结果是按钮的默认悬停样式
你改变了我的例子，这不是我粘贴的。
我改了给你看效果。它应该适用于这种风格。在您的演示中，如果您删除 css 也会给出相同的结果
我更改了网址。问题是输入元素不应该用 CSS 规则来改变。