I have configured my site's visited link to change color with the following CSS:
a:link {text-decoration: none; color: Navy;}
a:visited {text-decoration: none; color: DeepSkyBlue;}
It works well.
However, I am unable to initialize the link decoration even when I reload or clear my browser's cache. This is what I want to do:
By reloading by browser, I want the browser to forget the links that were visited, i.e, I want the visited link's DeepSkyBlue color changes to the default Navy color on page reload.
I am using the latest version of chrome.
I am OK with using any Chrome extension if necessary.
A solution with JavaScript or CSS will be fine too.
It seems to have an easy solution, but my research so far has been fruitless.
Thanks,
This is a CSS and Chrome issue. Yes, you cleared your cache, but the cache in Chrome is like bubble gum on the bottom of your shoe. I think with developer tools open it is Shift + refresh choose hard refresh no cache.
With CSS it used to be that you had to list all 4 for them to work properly. That is probably not your problem though, might be worth ruling out. It is possible it is picking up the active state if the active state has not be set.
a {text-decoration: none;}
a:link { color: Navy; }
a:visited { color: DeepSkyBlue; }
a:hover { color: Navy; }
a:active { color: Navy ;}
Related
I'm practising animations in CSS but somehow one of the buttons refuses to change.
It's the last button, all alone, that needs to have white text when you hover on it (and also white text when you click on it). I've tried some things but didn't work, who can help me? (Also I prefer not to use javascript)
Code can be find here: https://limoon.nl/test-animations/
Edit: It worked, thanks for all the tips!
First off, you shouldn't have an anchor inside of a button. It's better to ditch the outer button and style the anchor with the same styles as a button.
The reason why the anchor isn't changing colour is because you are setting it here
/*link */
a:link, a:visited, a:hover, a:active {
color: black;
text-decoration: none;
}
This will take precedent over the button hover styling
You should not use links within the button.
<button class="LMbuttonBG">Hover over mij</button>
Replace with this:
<button class="LMbuttonBG">Hover over mij</button>
Currently, in your code, the color style of tag is black.
Like this and try it.
.LMbuttonBG:hover, .LMbuttonBG:active, .LMbuttonBG:focus {
background-color: black;
}
.LMbuttonBG:hover a, .LMbuttonBG:active a, .LMbuttonBG:focus a{
color: #fff;
}
You can specify a class for link inside the button like that.
.LMbuttonBG:hover a {
color: white;
}
I created a selected link class via java script to highlight the menu link of the page the user is currently on:
<script>
$(document).ready(function(){
$('a').each(function(){
if($(this).prop('href')==window.location.href){
$(this).addClass('selected');
}});
});
</script>
Then I edited the link states in css:
#topnavindex {width:17%;float:left;position:fixed;}
#topnavindex ul {margin:4% 0 0 10%;}
#topnavindex ul li {font-size:83%;letter-spacing:3px;margin:0 0 1.7% 0;list-style-type:none;}
#topnavindex a {font-weight:bold;text-decoration:none;}
#topnavindex a:link {color:#8a523e;}
#topnav a:link {color:#232323;}
#topnav a:visited {color:#232323;}
#topnav a:hover {color:#27a896;}
#topnav a.selected {color:#27a896;}
While Chrome and Firefox display my website correctly Internet Explorer ignores the selected link property.
Due to the way you are referencing the anchors (through a parent element) the styling from those CSS rules is taking preference over your "selected" class.
Referencing your "selected" class as (through the parent element in the same way as the other rules are):
#topnav a.selected
should make you able to remove the "!important" tag
Looking at you're JS, you'll probably want to be more specific on your opening selector than just $("a").each. This will end up looping through every single link you have across your site that you might have in the future. You could simply add your #topnav in there to make it only look through the relevant anchors.
$("topnav a").each...
So thanks to everybody that helped me figure out the problem. The solution was easier than expected.
I had to change the IE settings ("Advanced"-tab) to "Allow active content to run files on my computer". After that IE could recognize the JavaScripts!
This problem only occurs because my files were saved locally. On a live webpage the scripts will most likely work for the audience without changing the IE settings.
I have a CSS style set for an element when someone clicks or hovers on the element. On mobile Safari, when users click it to go to a new page but then hit the browser's back button, it's still shown in the "click" color. Is there a way to stop this?
.button:hover, .button:active
{
color: red;
}
Mobile safari browser has this typical way of handling pages i.e., once it redirects to new page it will cache the page state itself or snapshot of page and when you come back it will show that snapshot directly. I too faced these kind of issues but i didn't found a rigid solution.
I solved the issue by changing the color of button back to whatever(default) in the click handler itself and then performed my remaining actions in your case it is redirection. Hope it will help you as a quick fix for the issue
You're looking for the :visited selector:
.button:hover, .button:active
{
color: red;
}
.button:visited
{
color: blue;
}
I have an webapp, where buttons are created with <a> elements, and all have href set to #. I want to remove blue border around <a> links during mouse click, because Opera Mobile annoyingly highlights all <a> elements, which has same href set.
Example picture:
How can I remove it?
I think Opera may be looking for something a little stricter on the outline element.
Try:
a:focus { outline:0px solid #fff; }
The 'solid' and 'colour' will be ignored.
Try this:
a, a:active, a:focus {outline:none}
Also if you are having trouble on a Flash object/embed, you can:
object, embed {outline: 0}
Not 100% because I can't really test, but did you try adding outline: none; to the css for links? You may need to add it to a:focus and/or a:target
Uh-oh:
Spatial navigation: Spatial Navigation
is an Opera feature whereby each
element available for activation is
put into a collection. When the user
moves a joystick or clicks specific
keys, the focus is moved to the next
element in the collection. This
element is typically highlighted with
a blue or black border. Links, form
controls, and elements with onclick
handlers are added to the collection.
http://dev.opera.com/articles/view/characteristics-of-widgets-on-mobile-pho/
Use div's with onclick() handler, instead staight <a> or buttons:
Example:
In CSS:
#home-send{
background: url(gfx/button.png) no-repeat;}
On page:
<div id="home-send" onclick="next('NEXT ACTION');"></div>
On click on the DIV the action will take place ,but no outline borders effect.
I hope this help
To remove the Blue border use this on TOP of you CSS file
:focus { outline: 0 solid; }
or
:focus { outline: none; }
I have had the same problem and none of the answers here worked. However, I recently found a solution that worked for me (A little late to the party however...).
Try:
:focus{
outline: 2px solid rgba(0,0,0,0.0);
}
If that doesn't work, you can go more specific like:
a, a:active, a:focus {
outline: 2px solid rgba(0,0,0,0.0);
}
You need to actually set an outline first, then make it transparent.
https://dev.opera.com/tv/tweaking-spatial-navigation-for-tv-browsing/
is it possible to use the window.location = "http://google.de" with _blank?
I dont want to use the <a href ... > at all, because it makes problems with the CSS (link-color).
You must always insert this code and that nervs :/
.bone a:link { color:#FFFFFF; text-decoration: none }
.bone a:visited { color:#FFFFFF; text-decoration: none }
.bone a:hover { color:#FFFFFF; text-decoration: none }
.bone a:active { color:#FFFFFF; text-decoration: none }
.bone a:hover { color:#FFFFFF; text-decoration: none }
Thanks in advance!
Peter
Certainly, simply use window.open('http://www.example.com/', '_blank');
You probably need one CSS line:
.bone a { color:#FFFFFF; text-decoration: none }
Technically, this will also match non-link anchor tags. But you probably want those styled the same way. I think this is cleaner than a Javascript solution.
I assume you're looking for something like:
var w = window.open("http://google.de", "_blank");
Bear in mind that it will shoot you in the foot as far as accessibility, search engine indexing, etc. go.
You must always insert this code and that nervs :/
You shouldn't have to insert all those. This should be enough:
.bone a {
color: #FFFFFF;
text-decoration: none;
}
If you find that's not enough, you probably have a specificity problem with your CSS; that is, you've specified different link colours elsewhere in CSS with same specificity but with different colours for hover, active etc. You get around that by making the rule you want to have effect here have a higher specificity than the global rule you want it to override.
Using Javascript to get around a styling problem is like buying a bicycle because you've lost your keys to your car.
Your Javascript won't work on browsers with Javascript disabled, search engine spiders won't be able to follow it, and who knows about mobile browsers or browsers for people with disabilities.