Solved

Anchor text-decoration on a MasterPage

Posted on 2016-09-26
7
56 Views
Last Modified: 2016-10-03
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.
0
Comment
Question by:Howard Bash
  • 3
  • 2
  • 2
7 Comments
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41816801
Can you please show us how you're attempting to change the color, visit and hover attributes?
0
 

Expert Comment

by:Bhupendra Rayate
ID: 41819324
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
 
LVL 1

Author Comment

by:Howard Bash
ID: 41819887
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
Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

 
LVL 42

Accepted Solution

by:
zephyr_hex (Megan) earned 500 total points
ID: 41819982
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
 
LVL 1

Author Comment

by:Howard Bash
ID: 41820084
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
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41820148
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
 

Expert Comment

by:Bhupendra Rayate
ID: 41820457
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

Featured Post

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question