CODEWITHSUNDEEP
csstwitter-bootstrap
wingy
wingy

Reputation: 559

Switch icon on mouse hover

I'm displaying one of the Twitter Bootstrap provided icons in an anchor. I want the default icon to be switched to icon-white when i have the mouse over the anchor.

The effect should be like when you hover over the anchors in the navbar here

How is this done?

Upvotes: 3

Views: 23822

Answers (7)

Dmase05
Dmase05

Reputation: 1089

Use jQuery toggleClass() on hover to change the icon to white.

See this jsfiddle.
HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#"><div class="btn btn-primary">
    <i class="glyphicon  glyphicon-print"></i>&nbsp;Click</div></a>
<br/>

Script:

$("document").ready(function(){
    $("a").hover(function(){
        $('i').toggleClass('glyphicon-envelope glyphicon-print');
    });
});​

Upvotes: 4

user2134466
user2134466

Reputation: 306

I know there are already a few quick solutions posted that will do the trick. I would like to add my solution if you would like to achieve this without using JQuery or CSS:

  1. Crate an $scope object that contains the name of the icon class your would like to set by default.

    $scope.myClass = "glyphicon glyphicon-ok"

  2. Add ng-class directive and get the class name from $scope.MyClass, add ng-mouseover and ng-mouseleave directives and change $scope.MyClass value

    <span
     ng-class="myClass"
     ng-mouseover="myClass = 'glyphicon glyphicon-remove'"
     ng-mouseleave="myClass = 'glyphicon glyphicon-ok'">
</span>

Upvotes: 0

Merlin
Merlin

Reputation: 4927

Some of the answer above are not working and give a background image with all glyphicons at ones.

This works form me. Notice that I have changed the color of the icons to fits my needs.

a:hover > [class^="icon-"] {
    background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}

Upvotes: 0

Anders Arpi
Anders Arpi

Reputation: 8417

You use the CSS pseudo-class :hover to set a different background:

.menulink:hover { background-image: url('alternative_sprite.png'); }

Upvotes: 4

Gileno
Gileno

Reputation: 106

Actually, the AngularJS website uses a webfont to display icons:

font-family: 'FontAwesome';

And they insert the font-icon using CSS pseudo-class :before:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: FontAwesome;
}

Which it is a brilliant solution, if you resolve to create your own icon web font.

Or even better, you can use Font-Awesome.

Upvotes: 1

Damon Mannion
Damon Mannion

Reputation: 324

just switch over the glyphicons image?

(extracted from my css, which is a sass version, and my images are in a different place, but you get the idea...)

&:hover{
  i{
    background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
  }

Upvotes: 1

Andreas Nilsson
Andreas Nilsson

Reputation: 231

Use CSS psuedo-class :hover..

.menulink:hover { background-image: url('myimage.png'); }

Upvotes: 0

Related Questions