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

2022-01-22 00:00:00 hover html css mousehover

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

I have the following piece of HTML/CSS code which is used to display pages based on the number of rows retrieved from a database.

.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 类应用于鼠标悬停时的所有这些按钮.

Upto this there is no question. I want to apply the CSS class something like the following to all of those buttons on mouse hover.

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

那些名称属性为 btnPage 的按钮是在循环中动态生成的.因此，我认为基于 id 属性应用前面的 CSS 类是不方便的.

Those buttons with the name attribute btnPage are generated dynamically in a loop. Therefore, I think it is inconvenient to apply the preceding CSS class based on the id attribute.

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

So, how can this class be applied to those buttons on hover?

推荐答案

添加以下代码

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

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

If you need only for these button then you can add id name

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

演示

相关文章