CODEWITHSUNDEEP
cssbuttontwitter-bootstraphover
Michal
Michal

Reputation: 113

CSS Bootstrap buttons

I have a problem with stylize buttons in bootstrap.

<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 different image (and class which change backround-image). Icon-blue should be change on hover.

Thanks for help.

CSS:

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

Here an example :

enter image description here

Upvotes: 3

Views: 9838

Answers (3)

Martinomagnifico
Martinomagnifico

Reputation: 23

Just put the hover on the first element. You don't want to have to hover exactly on the icon:

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

CSS, no JS required.

Upvotes: 1

000
000

Reputation: 27227

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

Upvotes: 4

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102378

You can do this with jQuery easily employing the .hover() method:

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

Upvotes: 2

Related Questions