CSS引导按钮

我对引导中的样式化按钮有问题

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

这里有一个例子：

您可以轻松使用以下方法：

$（文档）.ready（函数（）{
$（“span.icon灰色”）。悬停(
函数（）{
$（此）.removeClass（“图标灰色”）；
$（此）.addClass（“图标蓝色”）；
},
函数（）{
$（此）.removeClass（“图标蓝色”）；
$（此）.addClass（“图标灰色”）；
}
);
});

只需将鼠标悬停在第一个元素上。您不希望将鼠标悬停在图标上：

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

---

CSS，不需要JS。

我承认我不理解你的问题。。。你能澄清一下吗？现在我有了点1）中的效果。我需要将悬停（onMouseOver效果）添加到图像中并对其进行更改（第2点））。不幸的是，我只能将html与cssis一起使用。是否可以将悬停效果（图标下载alt:hover）连接到此元素？当鼠标上的图像在这个按钮上更改时效果会更好。如果您希望在悬停其他元素时更改元素，则必须使用javascript。

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

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

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