Change link color on mouse over


#1

Hi,
I googled around for more than 5 hours now but still I couldn’t get the
solution for my question: How can I change the color of the link as the
mouse is rolled over it? Also, change the color of the active link and
visited link as I completely hate the default behavior of onmouseover
which creates a black box over the link as mouse is rolled on top of a
link. An also get rid of the underline in the link. I’m using <%=link_to
“Home”, :action=>“show_home”%>. Thank you.


#2

On Sat, Apr 25, 2009 at 7:00 AM, Jay P.
removed_email_address@domain.invalid wrote:

How can I change the color of the link as the
mouse is rolled over it? Also, change the color of the active link and
visited link

http://www.w3.org/TR/CSS21/

HTH,

Hassan S. ------------------------ removed_email_address@domain.invalid


#3

Hassan S. wrote:

On Sat, Apr 25, 2009 at 7:00 AM, Jay P.
removed_email_address@domain.invalid wrote:

How can I change the color of the link as the
mouse is rolled over it? Also, change the color of the active link and
visited link

http://www.w3.org/TR/CSS21/

HTH,

Hassan S. ------------------------ removed_email_address@domain.invalid

Thanks for the reply Hassan, I went to the site and did the following:
sth.html.erb

Home
<%= link_to "Products", :action => "show_products", :class => "side-link" %>
==================================================================================

sth.css

#side a.side-link:link {
color: black;
}

#side a.side-link:visited {
color: yellow;
}

#side a.side-link:hover {
color: white;
}

#side a.side-link:active {
color: green;
}

Now the problem is, it is only working in the link produced by and not in the link produced by <%=link_to "…%>.
Also I wanted to get rid of the black box around the link as it gets
focus, but couldn’t. For this I tried #side a.side-link:focus
{background: none;} but didn’t help. So, any help will be greately
appriciated. Thanks


#4

Frederick C. wrote:

On Apr 26, 7:01�am, Jay P. removed_email_address@domain.invalid
wrote:

Hassan S. wrote:

On Sat, Apr 25, 2009 at 7:00 AM, Jay P.
removed_email_address@domain.invalid wrote:

=========================================================================== =======

� Home
� <%= link_to "Products", :action => "show_products", :class => "side-link" %>

If you check the generated HTML you’ll see that you call to link_to
doesn’t actually create a link with class side-link: it creates a link
whose URL contains ?class=side-link. It’s the old “HTML options need
to be in a separate options hash” thing.

Fred

Thanks Fred I figured it out. Now the only problem that persists is when
I hover over the links a background with black color appears as the link
gets focus and I hate it but couldn’t figure out how I can get rid of
it. Thanks


#5

Include the following CSS property for all the anchors in your project

a{
outline:none
}
I checked the code in firefox, chrome and IE7. Hope this will work.
If u r using different CSS classes just make sure that any other class
doesnt override this property.

Thank u

On Apr 26, 5:01 pm, Jay P. removed_email_address@domain.invalid


#6

On Apr 26, 7:01 am, Jay P. removed_email_address@domain.invalid
wrote:

Hassan S. wrote:

On Sat, Apr 25, 2009 at 7:00 AM, Jay P.
removed_email_address@domain.invalid wrote:

=========================================================================== =======

Home
<%= link_to "Products", :action => "show_products", :class => "side-link" %>

If you check the generated HTML you’ll see that you call to link_to
doesn’t actually create a link with class side-link: it creates a link
whose URL contains ?class=side-link. It’s the old “HTML options need
to be in a separate options hash” thing.

Fred


#7

Samiron Rony wrote:

Include the following CSS property for all the anchors in your project

a{
outline:none
}
I checked the code in firefox, chrome and IE7. Hope this will work.
If u r using different CSS classes just make sure that any other class
doesnt override this property.

Thank u

On Apr 26, 5:01�pm, Jay P. removed_email_address@domain.invalid

Thanks for the reply Samiron, I figured it out. Use of background: none;
did the job but the one you said didn’t help. Anyway, I finally had the
ugly thing out of my page. Thanks.