如何將懸停的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類應用到動態生成的提交按鈕？

回答

相關問題