Solved

Anchor text-decoration on a MasterPage

Posted on 2016-09-26
7
47 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:hbash
  • 3
  • 2
  • 2
7 Comments
 
LVL 42

Expert Comment

by:zephyr_hex
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:hbash
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
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

 
LVL 42

Accepted Solution

by:
zephyr_hex 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:hbash
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
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now