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

How to apply a CSS class on hover to dynamically generated submit buttons?

提问by Tiny

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.

我有以下一段 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>

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.

到此为止是没有问题的。我想将类似于以下内容的 CSS 类应用于鼠标悬停时的所有按钮。

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

Those buttons with the name attribute btnPageare generated dynamicallyin a loop. Therefore, I think it is inconvenient to apply the preceding CSS class based on the idattribute.

那些具有 name 属性的按钮btnPage是在循环中动态生成的。因此，我认为根据id属性应用前面的CSS类是不方便的。

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

那么，这个类如何应用于悬停时的那些按钮？

回答by Sowmya

Add the below code

添加以下代码

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

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

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

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

DEMO

演示

回答by George Katsanos

The most efficientselector you can use is an attribute selector.

您可以使用的最有效的选择器是属性选择器。

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

Here's a live demo: http://tinkerbin.com/3G6B93Cb

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

回答by strauberry

You have two options:

您有两个选择：

1. Extend your .pagingclass 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;
   }
   

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

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

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

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