Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Anchor text-decoration on a MasterPage

Posted on 2016-09-26
7
Medium Priority
?
78 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 44

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
Industry Leaders: 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!

 
LVL 44

Accepted Solution

by:
zephyr_hex (Megan) earned 2000 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 44

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

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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 …

609 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