如何申请一个CSS类上悬停动态生成的提交按钮？(How to apply a CSS class o

我有以下的片，其用于显示根据从数据库检索的行数页的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是在一个循环中动态生成的。 因此，我认为这是不方便的应用基础上，前面的CSS类id属性。

那么，如何可以在这个课堂上应用到悬停这些按钮？

Answer 1:

添加下面的代码

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

如果你只需要为这些按钮，然后你可以添加ID名称

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

DEMO

Answer 2:

你可以用最有效的选择是一个属性选择 。

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

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

Answer 3:

你有两个选择：

1. 扩展您的.paging类定义：

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

2. 使用DOM层次应用CSS样式：

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

文章来源: How to apply a CSS class on hover to dynamically generated submit buttons?