[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1039
  • Last Modified:

underline on hover

hi,

I have a few css styles.  What I'm trying to achieve is to underline and show a different colour when the user hovers over the link.  Here's the css styles which i've attached to the links on the page.

.ms-nav{
font-family: tahoma;
font-size: 9pt;
color: #636363
}

.ms-nav a{
font-family: Tahoma;
Color: #636363;
font-size: 9pt;
text-decoration: none;
}

.ms-nav a:hover{
font-family: tahoma;
font-size: 9pt;
color: #AE0A38;
}

.ms-nav a:link{
color: #AE0A38;
text-decoration: underline;
font-family: Tahoma;
font-size: 9pt;
}

.ms-nav a:visited{
font-family: Tahoma;
font-size: 9pt
}

in my href i have the following:

<a class=ms-nav href="url goes here">

Thanks
0
mitesh114
Asked:
mitesh114
  • 3
  • 2
2 Solutions
 
RoonaanCommented:
You can edit your .ms-nav a:hover class to hold
a.ms-nav {
font-family: Tahoma;
color: #636363;
font-size: 9pt;
text-decoration: none;
}

a.ms-nav:link{
color: #AE0A38;
}
a.ms-nav:visited{
}

a.ms-nav:hover{
color: pink;
text-decoration: underline;
}

You have font-size and font-family defined in the .ms-nav class, so you don't need to define it in every subclass.

-r-

0
 
mitesh114Author Commented:
Roonaan,

You have put a.ms-nav and I have .ms-nav a, does this make a difference?

I tried your suggestion and it doesn't highlight the links when hovered over.  I am using this in Sharepoint; does this make any difference?  I am modifying the classes via themes in frontpage.  

Regards
0
 
SheharyaarSaahilCommented:
Normally we use a:link, a:visited and a:hover styles for ALL the links present on the page.
but if you want to use different hover behaviours for different links, you can use the following type of style sheets

a:link {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:visited {
    text-decoration: none;
}
a.ms-nav:link {
    text-decoration: none;
    color: #666666;
}
a.ms-nav:visited {
    color: #666666;
    text-decoration: none;
}
a.ms-nav:hover {
    color: #CC0000;
    text-decoration: underline;
}

NOTE: always use link, visited and hover in the proper order, means first A:LINK, second A:VISITED and thrid A:HOVER
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
SheharyaarSaahilCommented:
a test page,

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
a:link {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:visited {
    text-decoration: none;
}
a.ms-nav:link {
    text-decoration: none;
    color: #666666;
}
a.ms-nav:visited {
    color: #666666;
    text-decoration: none;
}
a.ms-nav:hover {
    color: #CC0000;
    text-decoration: underline;
}
-->
</style>
</head>

<body>
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com" class="ms-nav">Yahoo</a></p>
</body>
</html>

=========================
0
 
RoonaanCommented:
@mitesh114,

Yes it matter whether you use .ms-nav a:link or a.ms-nav:link. The first one will not work because that rules looks for a link element which is a child element with class-name "ms-nav". The second one looks for a link with class-name "ms-nav".

@SheharyaarSaahil,

>NOTE: always use link, visited and hover in the proper order, means first A:LINK, second A:VISITED and thrid A:HOVER

>a test page,
..
> a:link {
> a:hover {
> a:visited {
0
 
SheharyaarSaahilCommented:
yeah my mistake....sorry
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now