Geek asks and answers

Bootstrap CSS Buttons

I have a problem with stylized buttons on boot.

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

I want to change icon-gray to icon-blue. Of course, I have another image (and a class that changes the inverse image). The blue icon should be changed when you hover over the mouse.

Thanks for the help.

CSS

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

Here is an example:

enter image description here

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

You can do this using jQuery with . 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>
+2
source

Just hover over the first item. You do not want to hover over the icon:

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

CSS, no JS required.

+1
source

More articles:


All Articles