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

我有以下一段HTML/CSS代码，用于根据从数据库中检索的行数来显示页面。如何将悬停的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类是不方便的。

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

来源

2013-03-06 Tiny

添加下面的代码

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

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

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

DEMO

来源

2013-03-06 09:39:55 Sowmya

这将针对所有的投入，而不是与btnPage名称的那些属性为微小的问道。 – 2013-03-06 09:46:50

@GeorgeKatsanos他要求所有的按钮（我想将CSS类应用到鼠标悬停的所有按钮上）。那些名称属性为btnPage的按钮是动态生成的，因此分配类名称并不是一个好主意，因为您不能为动态生成的按钮提供类名称。这就是他所说的 – Sowmya 2013-03-06 09:49:54

他的英语显然不完美..我认为他应该澄清。如果他希望所有输入都具有一些样式，那么#paginate input {}将会这样做 - 但我不明白他为什么必须提及名称btnPage属性部分。 – 2013-03-06 09:52:08

你有两个选择：

扩展您的.paging类定义：

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

使用DOM层次应用CSS样式：

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

来源

2013-03-06 09:41:18 strauberry

最高效选择，你可以使用是attribute selector。

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

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

来源

2013-03-06 09:42:02

当你添加自定义样式时，这不起作用http://tinkerbin.com/noZjmZkA在你的页面显示的结果是默认的悬停样式的按钮 – Sowmya 2013-03-06 09:47:26

你改变了我的例子，这不是我粘贴的。 – 2013-03-06 09:49:22

我改变以显示效果。它应该以这种风格工作。在你的演示中，如果你删除了CSS也会得到相同的结果 – Sowmya 2013-03-06 09:51:11

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

回答

相关问题