CSS 引导按钮答案

【问题标题】：CSS Bootstrap buttonsCSS 引导按钮
【发布时间】：2012-04-26 15:16:59
【问题描述】：

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

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

这里是一个例子：

【问题讨论】：

我承认我不明白你的问题......你能澄清一下吗？
imageshack.us/photo/my-images/846/18975666.png 现在我的效果类似于第 1 点）。我需要将悬停（onMouseOver 效果）添加到图像并更改它（第 2 点）。

标签： css button twitter-bootstrap hover

【解决方案1】：

您可以使用jQuery 轻松地使用.hover() 方法来做到这一点：

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

【讨论】：

不幸的是我只能使用 html 和 css

【解决方案2】：

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

【讨论】：

是否可以将悬停效果 (icon-download-alt:hover) 连接到此元素
如果您希望在悬停不同元素时更改元素，则必须使用 javascript。

【解决方案3】：

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

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

CSS，不需要 JS。

【讨论】：