CODEWITHSUNDEEP
cssangularjs
kittu
kittu

Reputation: 7008

How to change color of caret when drop down button is hovered

I have a button(anchor tag) like this:

<a href ng-if="!isLogin" class="dropdown-toggle" data-toggle="dropdown">
<b class="white-link">Login</b> 
<span class="caret white-link"></span></a>

I am using white-link custom css class to apply color to login button.

When I hover on the login button, the css class is applied to only button but I want to apply it on both button and caret and same should work when I hover on caret. How do I do it in angular?

Upvotes: 0

Views: 579

Answers (2)

Saad
Saad

Reputation: 952

You can use ngMouseover, ngMouseleave and ngClass directive to apply css on hover and remove it on mouseleave.

<button ng-class="{'white-link': login}" ng-mouseover="login = true" ng-mouseleave="login = false">Login</button>
<span ng-class="{'white-link': login}" ng-mouseover="login = true" ng-mouseleave="login = false">Text</span>

On hover to login button and span element, white-link class will be applied on both button and span.

See this PLUNKER.

Upvotes: 1

asdf_enel_hak
asdf_enel_hak

Reputation: 7630

This is nothing to do with javascript nor angular
Just define your css class

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
   .white-link:hover { color: red !important}
</style>

<a href  class="dropdown-toggle" data-toggle="dropdown" >
  <span class="white-link">
<b>Login</b> 
<span class="caret"></span></span></a>

Upvotes: 2

Related Questions