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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
All Courses

From novice to tech pro — start learning today.