CODEWITHSUNDEEP
htmlcssruby-on-railsruby
ncrouch25
ncrouch25

Reputation: 270

How to make link_to links change color on hover

I'm trying to get 3 of my links to change color on hover here is the css that I have

a {
  color: #5c8a36;
}

a:hover {
  text-decoration: none;
  color: #5c8a36;
}

.home_links:hover,
.home_links:focus {
  color: #5c8a36;
}

<%= link_to "Business Development", business_development_path, :class => 'home_links', :style => 'color: white'; %>

For some reason with this setup the link doesn't change on hover. I'm not sure what to do to make it work. Any suggestions are appreciated.

EDIT: I want these specific links to appear white and then on the hover change color to the same as the rest of the links.

Upvotes: 1

Views: 1960

Answers (5)

AndrewL64
AndrewL64

Reputation: 16301

Either override the inline styling with an !imporant tag like this:

a.home_links:hover{
    color:#57a22b !important;
}

Or remove the inline style and add it to your css like this:

a.home_links {
  color: white;
}

a.home_links:hover {
  text-decoration: none;
  color: #5c8a36;
}
a.home_links:focus {
  text-decoration: none;
  color: #5c8a36;   
}

Or if the elements are dynamically generated along with the inline styling, then you can override the inline css with a selector like this:

a.home_links[style]:hover {
    color: #5c8a36 !important; 
}

Example Fiddle using the selector override trick

Upvotes: 1

VijayGupta
VijayGupta

Reputation: 675

use this it works for you 

 <%= link_to "Business Development", business_development_path, :class => 'home_links', :style => 'color: white'; %>



  <style type="text/css">
         .home_links:hover{
           color:#57a22b!important;
         }
     </style>

Upvotes: 1

JCB507
JCB507

Reputation: 39

Have you tried this:

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Upvotes: 0

Jason Graham
Jason Graham

Reputation: 904

Looks like you've specified both the hover, and non-hover styles to be the same colour. You'll need the hover style to be different to see the change.

Upvotes: 0

Peter
Peter

Reputation: 2362

The inline style :style => 'color: white'; takes precedence over external or internal styles. remove it for your css to take effect

Upvotes: 0

Related Questions