3

ブートストラップのボタンのスタイル設定に問題があります。

<div class="btn-group">
    <button class="btn btn-midd">Link</button>
    <button class="btn btn-midd dropdown-toggle">
       <span class="icon-download-alt icon-gray"></span>
    </button>
</div>

「icon-gray」を「icon-blue」に変更したい。もちろん、私は異なる画像（および背景画像を変更するクラス）を持っています。アイコン青は、ホバー時に変更する必要があります。

手伝ってくれてありがとう。

CSS:

.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png");}
 .icon-download-alt {background-position: -408px -96px;}

ここに例があります：

ここに画像の説明を入力

4

3 に答える 3

4 
.icon-download-alt:hover {background-image: url("../img/glyphicons-halflings-blue.png");}
.icon-download-alt {background-position: -408px -96px;}
于 2012-04-14T16:17:26.063 に答える
2

.hover()メソッドを使用して、 jQueryで簡単にこれを行うことができます。

<script type="text/javascript">

$(document).ready(function() {

    $("span.icon-gray").hover(
        function () {
            $(this).removeClass("icon-gray");
            $(this).addClass("icon-blue");
        },
        function () {
            $(this).removeClass("icon-blue");
            $(this).addClass("icon-gray");
        }
    );

});

</script>
于 2012-04-14T15:44:14.677 に答える
1

最初の要素にホバーを置くだけです。アイコンに正確にカーソルを合わせる必要はありません。

    .btn:hover .icon-download-alt { background: url("../img/glyphicons-halflings-blue.png") -432px -144px; }

CSS、JS は必要ありません。

于 2012-06-05T18:30:52.240 に答える