web-dev-qa-db-ja.com

ホバーでCSSクラスを動的に生成された送信ボタンに適用する方法は？

データベースから取得した行数に基づいてページを表示するために使用される次の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クラスを適用するのは不便だと思います。

では、ホバーのボタンにこのクラスをどのように適用できますか？

htmlcsshovermousehover
20
Tiny

以下のコードを追加します

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

これらのボタンだけが必要な場合は、ID名を追加できます

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

[〜＃〜] demo [〜＃〜]

35
Sowmya

使用できるほとんどのefficientセレクターは attribute selector です。

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

ここにlive demo：http://tinkerbin.com/3G6B93Cb

5
George Katsanos

次の2つのオプションがあります。

  1. .pagingクラス定義：

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

  2. DOM階層を使用してCSSスタイルを適用します。

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