In order to further my CSS knowledge I've been attempting this, but I'm not even sure it's possible.
I have a list of 50 links, 1 per line going down the page. There is very little vertical padding/margin between each link. Each link has been assigned an individual HTML id, e.g.
<a id="test" href="temp.html">blaghblagh</a>
so that visiting http://example.com/temp.html#test will change the page focus to the specific link id.
What I'm wanting is when a temp.html#test url is visited, the #test id link anchor will cause the link to "stand out" by placing padding/margin around the link.
I've been trying to combine it with a:hover and all kinds of stuff but to no avail. Any advice would be greatly appreciated.
You need to use :target pseudo selector:
a:target {
padding-left: 20px;
color: red;
}
Demo: http://jsfiddle.net/dfsq/QuFHp/
The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. (http://css-tricks.com/on-target/)
IE supports it starting from version 8. If you need to support older browsers you have to use javascript:
var hash = location.hash;
if (hash) {
document.getElementById(hash.replace('#', '')).className = 'active';
}
There's a :visited selector specific to anchor tags:
a:visited {
padding:10px; /* Whichever values you wish to use. */
margin:10px;
}
The selector you're looking for is :visited:
a:visited {
padding: 5px;
margin: 5px;
/* or whatever you want, really */
}
Try. a:visited{ color: red; }
Find out more about Pseudo-Classes small documentation
This cannot be done with pure CSS, but it is achievable with Javascript/jQuery.
Shameless plug, but I wrote an article on how to achieve this which you might find useful.
http://curtistimson.co.uk/js/reading-url-hashtag-values/
if (window.location.hash){
var hash = window.location.hash.substring(1); //gets id in URL
$("#" + hash).css("padding", "10px"); //applies padding to that element
}
I don't think you can do this normally with CSS. You would have to add a jQuery function which checks to see if there is an ID appended to the URL and if so add a class to that link.
Where are you going wrong with a:hover? Post some code and I'll update my answer to get that working.
Related
I have little experience with CSS so this might be a very simple problem.
I have a table of contents on my web page with links like this:
User interface
and somewhere else I have a bookmark like like this:
<a name="user-interface">User Interface</a>
Besides that I have a CSS file with the following style:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
The goal is to change the color and background color of the link when I move the cursor over the link, and that is working perfectly. But the problem is that the bookmarks are also changing style when I move the mouse pinter over them. It makes sense to me since both the link and the bookmark use the <a> tag but i cannot figure out how to distinguish both on the CSS. I know I could use a class for the link but I wonder if there is a better way.
<a name="..."> is deprecated.
Instead, you should just put an id="..." on any element.
To answer the question, add :link.
While the :link selector appears to work, according to W3Schools, it only applies to unvisited links.
(Edit: It appears W3Schools was misleading on this. The :link selector, in some browsers at least, will select <a> tags that link to something, visited or not, but the color attribute will be overridden by the browser defaults for visited links. Apparently the attribute selector, as detailed below, has a higher specificity than the default browser settings, so if you want to force your links to be the color you set, regardless of whether the user has clicked that link before or not, then the attribute selector should be used.)
One way to do this if you're not overly concerned with IE6, and have a doctype specified for IE 7 and 8, would be to use an attribute selector:
a[href]:hover {
color:#D090D0;
background:#803080;
text-decoration:none;
}
Outside of that, I think you'd be best off adding a class.
Use :link selector to select a link
a:link:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
http://jsfiddle.net/9r4L9/
Use a class:
In HTML, use the class attribute.
User interface
<a name="user-interface">User Interface</a>
In the css:
.foo:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
Now, the style is only applied to the elements having class foo.
Add a class to the bookmark and then add some style on it after the hover declaration:
<a class="bookmark" name="user-interface">User Interface</a>
and css:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
a.bookmark {
color: black;
background: white;
text-decoration:none;
}
If I have a simple HTML and CSS document using bookmarks (named links) and ordinary links, is it possible to alter a bookmark (eg. change its color) when its link is being hovered over.
For example, if I have the following HTML
...
<a name="bookmark1">Bookmark One</a>
<a name="bookmark2">Bookmark Two</a>
<a name="bookmark3">Bookmark Three</a>
...
Link to BM#1
...
can I write CSS along the lines of:
a:hover
{
"the bookmark's color": red
}
which would have the effect of changing the bookmark's font (and not its link's) color to red? That is, the text "Bookmark One" changes color, not "Link to BM#1".
UPDATE: thanks to everyone who answered. In summary, it seems you can't affect the target of a link while hovering over it using just CSS. You need to resort to javascript. For my simple purposes I didn't want to go the trouble, so I selected the answer that was CSS only but required clicking on the link.
This can be done using the general sibling combinator but the source order will have to be different, the links that reference the named links must come before the named links since your selector is targeting the named links.
Link to BM#1
Link to BM#2
<a name="bookmark1">Bookmark One</a>
<a name="bookmark2">Bookmark Two</a>
<a name="bookmark3">Bookmark Three</a>
Another problem with this is that since there aren't variables or back-references in CSS you must explicitly make a CSS selector for each of the links you want to do this with.
a:hover[href="#bookmark1"] ~ a[name="bookmark1"],
a:hover[href="#bookmark2"] ~ a[name="bookmark2"] {
color: red;
}
Example 1
You'll notice in Example 1 "bookmark3" doesn't highlight since there is no rule referencing it.
A much more general and easier to maintain approach would be to highlight the named link after the link to it was clicked instead of on hover. You could do this with a simple :target selector
a:target {
color: red;
}
Example 2
If you are absolutely married to the idea that it must be on hover and don't mind using JavaScript you could do it with a little bit of jQuery:
$('a[href^="#bookmark"]').hover(function() {
// grab target of this link and remove the leading hash
var name = $(this).attr('href').replace(/^.*#/, '');
$('a[name="' + name + '"]').addClass('highlightedbookmark');
}, function() {
// grab target of this link and remove the leading hash
var name = $(this).attr('href').replace(/^.*#/, '');
$('a[name="' + name + '"]').removeClass('highlightedbookmark');
});
Example 3
Better yet this solution doesn't have the HTML source order restrictions that the pure CSS method does: Example 4
Assuming the ellipses in your question imply the location of your bookmarks, and they are the immediately following sibling of the links, you can use the adjacent-sibling selector:
div:hover + div {
color: blue;
}
JS Fiddle demo
Reference:
adjacent-sibling selector (CSS2).
You can assign a class to the bookmark link. See the below example:
HTML
<a name="bookmark1" class="bookmark">Bookmark One</a>
Link to BM#1
CSS
a:hover{
color: red;
}
a.bookmark:hover{
color: blue;
}
That way your normal links will hover RED (in this example) and your bookmark links will hover BLUE.
Use attribute selector:
a[name]:hover {
color: red;
}
You have to use the color tag to alter the color of text. It'd be also better if you use an id or class.
a:hover{
color:red;
}
#bookmark a:hover{
color:red;
}
EDIT
In case the text to be changes is different from the link text then you can use jQuery to do it, ex:
$("#boomkark-link").hover( function(){
$("#bookmark").css('color', 'RED');
}
#dave; may be you can define it with simple css declaration.
.wrap1 a, .wrap2 a{
background:green;
}
.wrap1 a:hover, .wrap2 a:hover{
background:red;
}
a{background:yellow;}
a:hover{background:pink;}
If the links are in different divs & you want to target an specific a tag.
check this for more http://jsfiddle.net/sandeep/RsmAg/
EDIT:
may be nth-child is also an option. Check THIS
I have the following html snippet:
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
Here is the css for these classes
.title
{
color:#707070;
}
.username
{
color:#8DAAB8;
}
.dateandtime
{
color:#A5A7AC;
}
Is it possible to change the colors of these 3 items when hovering over the title?
The colors I want the items to change to are as follows
title = 000000
username = DF821B
dateandtime = 3185B6
Not sure if this is possible with css, if the html snippet structure needs to change, that will not be a problem.
I know this can be done with javascript, but wanted to know if it is possible without javascript.
Use the :hover pseudoclass:
.title:hover
{
color: #000000;
}
etc. This works in all browsers, except in IE6 and earlier, which doesn't support :hover on anything other than hyperlinks (A elements).
Edit 1: I see you want to change them all while hovering over the title. In that case, it becomes a little more complicated. You should put a <div> around it and apply the :hover pseudoclass on that. It won't just be the title (which is also possible, but has even less chance of working in IE). For that:
<div class="someclass">Title<span class="username">username</span><span class="dateandtime">date and time</span></div>
is your HTML, but your CSS would be:
.someclass .title:hover { color: #000000; }
.someclass .title:hover ~ .username { color: #DF821B; }
.someclass .title:hover ~ .dateandtime { color: #3185B6; }
Where ~ is the sibling selector (meaning it should have the same parent (.someclass) as the .title:hover).
#Harry Joy: No, it's not. My answer is different, not to mention I don't have enough rep to post comments.
Edit 2:
As requested, to make them all change while hovering over the entire container, use the above HTML with the following CSS:
.someclass:hover .title { color: #000000; }
.someclass:hover .username { color: #DF821B; }
.someclass:hover .dateandtime { color: #3185B6; }
(though basically credit for that goes to Spudley for suggesting it first).
Not totally clear on the question -- do you want each of them to have their own hover colour, or do you want all three to change colour at once, when you hover on any of them?
In the first case, it's easy: just add a :hover style for each of the three elements (you already have answers to this effect, so I won't repeat them here).
In the second case, you'll need a container element that would take the hover, so your code would look like this:
<span class='container'>
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
</span>
(you may want to use <div> rather than <span>, but I'll leave that up to you)
Your CSS would then look like this:
.title {color:#707070;}
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}
.container:hover .title {color:#000000;}
.container:hover .username {color:#DF821B;}
.container:hover .dateandtime {color:#3185B6;}
Obviously, change the colours in the new styles to whatever you want them to be. If all three should be the same, then you could simplify the three new styles down to something like this:
.container:hover span, .container:hover a, {color:#000000;}
Hope that helps.
One final thing to note: IE6 and below do not support the :hover style on anything except <a> elements. My recommendation to you is simply not to support IE6 for your site (there are plenty of other things broken in IE6 too), but if you do need to support it, there are hacks available to get :hover to work with it. See Whatever:Hover.
It's definitely possible, just append this to your CSS:
.title:hover
{
color:#000000;
}
.username:hover
{
color:#DF821B;
}
.dateandtime:hover
{
color:#3185B6;
}
This called a pseudo-class and will make your anchors change color when hovered )
Edit:
At first I misunderstood your question, this isn't the solution!
You can't do this in CSS alone, but you can do it jQuery easily!
Here's an example.
What you need to do is set up a class for each of the hovered states, then use jQuery to replace add a class that will change the colors as you want :)
You just have to include the jQuery framework if you haven't already:
In the <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
Well you could do this one of two ways but not with CSS, you can either add and remove the appropriate classes (unobtrusive JavaScript) or change the styles directly. For instance:
document.getElementById('someElement').style.color = '#FF0000';
Or you can use a JavaScript library such as jQuery.
jQuery('p.someClass').mouseOver(function(e) {
e.target.style.color = '#FF0000';
})
.mouseOut(function(e) {
e.target.style.color = '#000000';
});
I'm interested in building a menu bar that's backwardly compatible. I'd like to use just HTML and CSS. So I'm thinking a table with a number of cells each set with a different bkgnd color dependent on it's state. Something along the lines of ....
a:link {
.cell01{background-color:#white};
.cell02{background-color:#white};
}
a:hover {
.cell01{background-color:#red};
.cell02{background-color:#blue};
}
(I'm thinking something like this as I want to whole of the cell, not just the text in the cell to be effected). Obviously this example does not work ... but is there a way??
Thanks in advance
Giles
You probably shouldn't think of a table anyway. You can easily style a UL to have the appearance of navigation and this is much more semantically correct.
Anyway - from the CSS above I guess you have a table inside you link? If so then the correct syntax would be:
a:link .cell01 { background-color: #fff; }
a:hover .cell01 { background-color: #f00; }
etc etc
(if you want to use color names then you don't use the # symbol. If you are using hex values then use the # as I did above).
Or do you have links within the cells? In that case you would switch the items around e.g.
.cell01 a:link {background-color: white; }
Hope it helps!
Update:
Ahh - Steve's answer above gives me a slightly better idea of what you are trying to do... You have the links within the table cell and you want the whole cell to change when it is hovered over? Then simply:
.cell01 { background-color: #fff; }
.cell02:hover { background-color: #f00; }
Note that this won't work correctly on IE6 as in IE6 only A elements have hover state. You can work around this by adding an additional class in Javascript if necessary...
First: don't use tables for layout, or navigation. There is no need for that. UL usually is the best choice for the task.
Second: make your a elements block level and some padding and style as you wish: http://kod.as/lab/nav/
See http://css.maxdesign.com.au/listamatic/ to learn more.
If you want to affect the whole of the cell, you need to apply the css to the parent. Then, the child <a> tags can act separately. Something like this:
parentCell { background:white; }
parent1:hover { background:red }
parent2:hover { background:blue }
parent1:hover a { font-weight:bold }
parent2:hover a { font-style:italic }
I am assuming your HTML looks like this:
<table>
<td class="cell1">
Link
</td>
<td class="cell2">
Link
</td>
</table>
If this is the case, what you are asking is not possible using HTML and CSS alone. CSS doesn't allow you to target the parents of a selector in any way. JQuery can do what you are asking using .parent()
I need to set the a:visited CSS to whatever color the normal a is set to.
What I want to be able to tell the browser is, for the visited links, use the same color as the unvisited links, whatever color it is.
I need to do this without specifying a particular color.
Like, if some weird browser comes along that uses "green" as the color for normal unvisited links, this CSS should instruct the browser to use that same green for visited links. Exactly what color is used by the browser should be transparent to my code.. hence the phrase "whatever color".
P.S. I know how to set a:visited and a to a particular color. That is not what I am asking.
P.P.S. I am willing to use JavaScript if I have to. But I am really hellbent on making the browser do this.
Why would I want to do something like that you ask?
The blue color that IE8 uses for links is kind of cool. It is not #0000FF. It is a nice shade of blue. So I want to set it for both visited and unvisited links. But I shouldnt take a screenshot or use some add-on to pick the exact hex value each time. If IE later changes the color to some other awesome shade, this code should just work. I don't want to again find the hex and change it all over my code.
This is just one reason. Don't give me the hex for that blue. Finding that out is easy but that wouldn't be the answer!
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}
Hell yes.
I needed this because some text links (as opposed to image links) were a major part of my project's main menu, so I want them MY colours, not browser colours!
Each link was enclosed in a p tag group whose class had a particular colour (MY colour) set in CSS.
Danny Robers script works for me in Firefox and Chrome (not sure about IE).
FWIW, the special value HyperlinkText would have been the "standard" way to do what you want, but it was dropped from CSS3 sometime in spring 2003.
It looks like Firefox is the only browser that started implementing it, because the following works for Firefox:
a:visited { color: -moz-hyperlinktext; }
I don't think there's a pure CSS solution. Usually you would pick a color, and set both a:link and a:visited that same color.
I tried {color: inherit} but that was useless.
This jQuery solution works great though.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var normalColor = $('a:link').css('color');
$('a:visited').css('color', normalColor);
});
</script>
</head>
<body>
Google
No where you've been
</body>
</html>
There is no way to do this using CSS. The browser indicates that a link has been visited based upon a database entry only it knows about, and then uses default colours specified in the specific browsers configuration.
CSS physically just cannot obtain the colour of something on the page. That is just the way it is. The only way is to use javascript like Danny Roberts' answer.
The reason I think that his answer is not working correctly is that $('a:visited') just selects all the visited links at that point in time and then the colour is changed for them.
What you need to do is watch for click events and re run the code each time:
var normalColor = $('a:link').css('color');
$('a').click(function() {
$('a:visited').css('color', normalColor);
});
I don't think there is a pure CSS way of achieving this. I think you would need to use JavaScript to get the color of the a and then set a:visited to that color and this probably wouldn't work in all browsers unless there was an a{color:#dea} specified.
Presto:
$(function(){
var sheet = document.styleSheets[document.styleSheets.length-1];
sheet.insertRule(
'a:visited { color:'+$('a:link').css('color')+'; }',
sheet.length
);
});
I've tested and can confirm this works in Chrome. Keep in mind however, which sheet you're adding the rules to -- make sure its media attribute applies to the media that you care about. Additionally, if you have any rules that override the a coloring, this likely won't work properly -- so make sure your stylesheets are clear of that.
I'm not so sure this is a very wise practice anyways. Personally, I always explicitly define my link colors for every site.
PS:
Apparently IE (don't know which versions) insists on their own syntax:
sheet.addRule('a:visited', $('a:link').css('color'), -1);
Nevermind this. See my other answer for something more specifically relevant to the asker's question.
I do this:
a, a:visited { color:#4CA1F6; }
a:hover { color:#4CB6E1; } a:active { color:#0055AA; }
Now that this thread has me thinking though, and I've made the following improvements to my method:
a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus { color:#4CB6E1; }
a:active { color:#0055AA; }
I required a solution to do as the title of this question suggests "Set visited link color to whatever the color of un-visited link is". For me I needed a way to perform an image comparison of browser page content screen grabs that I use for regression testing (pdiff - perceptual diff). Here is the code that worked for me.
(function(){
var links = document.querySelectorAll('a');
for (var i=0; i<links.length; i++) {
var link = links[i];
if (link.href) { //must be visitable
var rules = window.getMatchedCSSRules(link) || [];
var color = '#0000EE' //most browsers default a:link color;
for (var j=0; j<rules.length; j++) {
var rule = rules[j];
var selector = rule.selectorText;
color = rule.style['color'] || color;
}
link.setAttribute('style','color:' + color + ' !important');
//this was enough for me but you could add a 'a:visited' style rule to the rule set
}
}
})();
a:link, a:visited {color: inherit;}
a:hover, a:focus {color:inherit;}
a.one:link {
color:#996600;
background-color:transparent;
text-decoration:underline;
}
a.one:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a.one:visited {
color: #996600;
background-color: transparent;
text-decoration: underline
}
a.one:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}