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.
Cdcdda30ac4e349c6ffd0819b9e1666f?d=identicon&s=25 Jay Pangmi (jaeezzy)
on 2009-04-25 16: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.
Bee69cfed999cd13e3bff73d472a39ee?d=identicon&s=25 Hassan Schroeder (Guest)
on 2009-04-25 16:06
(Received via mailing list)
On Sat, Apr 25, 2009 at 7:00 AM, Jay Pangmi
<rails-mailing-list@andreas-s.net> 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 Schroeder ------------------------ hassan.schroeder@gmail.com
Cdcdda30ac4e349c6ffd0819b9e1666f?d=identicon&s=25 Jay Pangmi (jaeezzy)
on 2009-04-26 08:01
Hassan Schroeder wrote:
> On Sat, Apr 25, 2009 at 7:00 AM, Jay Pangmi
> <rails-mailing-list@andreas-s.net> 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 Schroeder ------------------------ hassan.schroeder@gmail.com

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
81b61875e41eaa58887543635d556fca?d=identicon&s=25 Frederick Cheung (Guest)
on 2009-04-26 10:44
(Received via mailing list)
On Apr 26, 7:01 am, Jay Pangmi <rails-mailing-l...@andreas-s.net>
wrote:
> Hassan Schroeder wrote:
> > On Sat, Apr 25, 2009 at 7:00 AM, Jay Pangmi
> > <rails-mailing-l...@andreas-s.net> 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
Cdcdda30ac4e349c6ffd0819b9e1666f?d=identicon&s=25 Jay Pangmi (jaeezzy)
on 2009-04-26 13:01
Frederick Cheung wrote:
> On Apr 26, 7:01�am, Jay Pangmi <rails-mailing-l...@andreas-s.net>
> wrote:
>> Hassan Schroeder wrote:
>> > On Sat, Apr 25, 2009 at 7:00 AM, Jay Pangmi
>> > <rails-mailing-l...@andreas-s.net> 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
25d73c90739bc1ba9835f770423557cf?d=identicon&s=25 Samiron Rony (samiron)
on 2009-04-26 14: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 Pangmi <rails-mailing-l...@andreas-s.net>
Cdcdda30ac4e349c6ffd0819b9e1666f?d=identicon&s=25 Jay Pangmi (jaeezzy)
on 2009-04-26 15: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 Pangmi <rails-mailing-l...@andreas-s.net>

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.