Anchor text-decoration on a MasterPage

On a SharePoint page,  I am trying to set an anchor tag to show underline and perhaps a color and a visited color etc.  The only thing that seems to work is that if I set it to none, I don't get the underline as expected and when I set the decoration to underline I get the underline.  But attempting to color it or add a visit or hover property don't work.

Any ideas here would be greatly appreciated.
LVL 1
Howard BashSenior Software EngineerAsked:
Who is Participating?
 
zephyr_hex (Megan)Connect With a Mentor DeveloperCommented:
You'd only want to use jQuery if you need to change CSS based on some action the user takes.  It doesn't sound like that's the case here.

Why not set up a class and assign it to the div wrapper?  By wrapper, I mean the div that holds all of the links.  It seems that your current approach is not using a generic enough class that can be shared across all links you want to style, so you'd have to create CSS for class col_1, col_2, etc.  You want to find a more generic way to target the links.

So, for example, given the following HTML
<div class="doIt">
    <div><a>My Link 1</a></div>
    <div><a>My Link 2</a></div>
</div>

Open in new window


Your CSS would look something like:
.doIt a {
  color: #ff0000;
}

.doIt a:visited {
  color: #0000ff;
}

.doIt a:hover {
  background: #66ff66;
}

Open in new window


Here is a Fiddle Demo.

Or, if you can't change the HTML, you can always just list out all of the classes that the styling should apply to:

.col_0 > a, .col_1 > a, .col_2 > a { css here }
.col_0 > a:visited, col_1 > a:visited, col_2 > a:visited { css here }

Open in new window

0
 
zephyr_hex (Megan)DeveloperCommented:
Can you please show us how you're attempting to change the color, visit and hover attributes?
0
 
Bhupendra RayateCommented:
you can try to use jquery to set style for that anchor field  data on sharepoint page. add or remove css class on hover or :visited and maked them important property
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Howard BashSenior Software EngineerAuthor Commented:
I used this:

.col_0 > a:link {color:#ff0000;}
.col_0 > a:visited {color:#0000ff;}
.col_0 > a:hover {background:#66ff66;}

That works for anchors in DIVs with a classname of 'col_0',  but not for 'col_1',  'col_2', etc...?
How would I use something like this with jQuery also?
0
 
Howard BashSenior Software EngineerAuthor Commented:
Unfortunately the number of classes is dynamic.  The DIV structure is generated off of a user specified DIV structure.  I need some kind of wild card specification for classes that begin 'col_'.
0
 
zephyr_hex (Megan)DeveloperCommented:
There is no wildcard in CSS.  Can you just target the link instead of basing it off of a link child of "col_" ?

a:hover { css here }

Open in new window


Or, better yet, what kind of HTML element is "col_" ?  Maybe target based on the HTML tag type instead of that class.

div > a:hover { css here }

Open in new window

0
 
Bhupendra RayateCommented:
you can try like this in jquery to add class and remove class

$('#elm').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

or use toggle class on hover in document.ready function
$(‘.element’).hover(
function(){$(this).toggleClass(‘classname’);}
);
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.