Forum: Ruby on Rails change link color on mouse over

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Jay P. (Guest)
on 2009-04-25 18:00
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.
Hassan S. (Guest)
on 2009-04-25 18:06
(Received via mailing list)
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
Jay P. (Guest)
on 2009-04-26 10:01
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
==================================================================================
<div id="side">
  <a href = "http://www....." class = "side-link">Home</a><br />
  <%= link_to "Products", :action => "show_products", :class =>
"side-link" %><br />
</div>
==================================================================================

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 <a
href=......></a> 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
Frederick C. (Guest)
on 2009-04-26 12:44
(Received via mailing list)
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:
>

> =========================================================================== =======
> <div id="side">
>   <a href = "http://www....." class = "side-link">Home</a><br />
>   <%= link_to "Products", :action => "show_products", :class =>
> "side-link" %><br />
> </div>

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
Jay P. (Guest)
on 2009-04-26 15:01
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:
>>
>
>> =========================================================================== =======
>> <div id="side">
>> � <a href = "http://www....." class = "side-link">Home</a><br />
>> � <%= link_to "Products", :action => "show_products", :class =>
>> "side-link" %><br />
>> </div>
>
> 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
Samiron R. (Guest)
on 2009-04-26 16:27
(Received via mailing list)
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>
Jay P. (Guest)
on 2009-04-26 17:15
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.
This topic is locked and can not be replied to.