css - CSS 引导按钮

Question

我在引导程序中的风格化按钮有问题。

<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;}

这里有一个例子：

Answer 1

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

Answer 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>

Answer 3

只需将鼠标悬停在第一个元素上。您不想将鼠标完全悬停在图标上：

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

CSS，不需要 JS。