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

时间:2013-03-06 09:37:26

标签: html css hover mousehover

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

那么,如何在悬停时将这个类应用于这些按钮?

3 个答案:

答案 0 :(得分:33)

添加以下代码

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

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

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

<强> DEMO

答案 1 :(得分:5)

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

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

以下是现场演示 http://tinkerbin.com/3G6B93Cb

答案 2 :(得分:2)

您有两种选择:

  1. 扩展您的.paging班级定义:

    .paging:hover {
        border:1px solid #999;
        color:#000;
    }
    
  2. 使用DOM层次结构应用CSS样式:

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