I was styling a <a> and it was all working great. But after 5 min when i came back and restart the live-server of node. Border just turned to violet and active state have a color of red. The code is below.
(Have restart the server, cleared the cache.)
html
<a href="#" class="learnmore-btn">
Learn More →
</a>
CSS
.learnmore-btn:link{
color: $color-primary-light;
padding: 1rem;
font-weight: 700;
font-size: 1.3rem;
text-decoration: none;
border: .1rem solid $color-primary-light;
border-bottom: .3rem solid $color-primary-light;
transition: all ease .2s;
&:hover{
background-color:$color-primary-light;
color: white;
box-shadow: 0 .5rem 1rem $color-primary-dark;
transform: translateY(-3px);
}
}
The variables
$color-primary-light:#7ed56f;
$color-primary-dark:#28b485;
Using the pseudo class :link you style only unvisited links. As soon as you click the link the browser marks it as visited and your styling doesn't apply anymore. The violet color is the default for visited links in most browsers. Removing :link should fix the issue.
Related
I'm having some issues trying to style the :focus state for text links in my SCSS design system, to ensure accessibility on keyboard navigation but also to make it look a bit nicer than the stock box outline.
I've managed to get it working cross-browser for text fields and buttons by using outline:none; and replacing it visually with box-shadow: 0 0 0 2px $color. I have to do this because Safari's focus outline doesn't follow border-radius.
Here's how it looks for form fields:
three text fields, the first of which has a custom focus state border
But for text, it still has the blue outline:
snippet of text with visited links, one has focus but still has a blue outline
html {
box-sizing: border-box;
font-size: 16px;
}
a {
color: #0000ff;
text-decoration: underline;
}
p {
color: #3b3b3b;
font-family: system-ui;
line-height: 1.5;
padding-left: 1rem;
padding-right: 1rem;
}
a:visited {
color: purple;
}
a:focus-visible {
text-decoration: none;
background-color: #0000ff;
color: white;
outline: 0;
box-shadow: 0 0 0 2px #0000ff;
border-radius: 2px;
}
a:visited:focus-visible {
text-decoration: none;
background-color: purple;
color: white;
outline: 0;
box-shadow: 0 0 0 2px purple;
border-radius: 2px;
}
<p>Here is some text. Here's one link. And here is some other text in between. And here is another link. Another link.</p>
Here's a CodePen demo.
As you can see, when you use tabs or keyboard navigation, when a visited link has :focus, it gets the correct background and text color, but still has a blue focus border, and I can't seem to get rid of it.
Using the Inspector, I can't see any other styles that are overriding it. It does follow the border-radius, so I'm just kind of confused as to where it's coming from.
CSS is supposed to let you stack basic selectors like :visited and :focus-visible, right?
For reference, this isn't exclusive to Safari, it happens in Chrome and Firefox as well, so it does seem to be CSS-related.
This is my first time using a framework and I'm working with zurbs Foundation 5 framework.
I have tried to extend/overwrite the default .button class and am using that as my main button. Below is the the css for my custom.css file that is overwriting default Foundation 5 styles:
The CSS styles
.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}
.button:hover{
background: #46A18C;
}
The corresponding HTML elements:
<p>This is a description of the thing in the thing</p>
<a class="button" href="#">View Project</a>
The problem I seem to be having is only evident in webkit browsers (safari/chrome) where everything works perfectly on load. The issue only comes up after you click a link, which all are set to href="#" for now. Once a link is clicked, the text inside each button disappears, only to reappear on hover. Not sure if it's relevant but the Foundation styling for this link also includes a transition property that is set to background-color 300ms ease-out 0s
You can see an example here: http://www.kashmachine.ca/build
I'm not sure what's causing, I've gone through it through firebug, disabling styles 1 by 1 but nothing seems to fix it. Any/all suggestions would be fantastic. I'm a little new to web development, but this has really stumped me. Thanks again for any help.
Your
a, a:visited {
color:#EE4D0D;
text-decoration:none;
}
have the same color as the background of your buttons..
Address your buttons like this:
a.button
So:
a.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}
a.button:hover{
background: #46A18C;
}
That should overwrite it..
I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader's rear end - and my coding knowledge is limited making this task difficult.
Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/
Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): http://i.imgur.com/1xbbl.png
I came across a script that does this.
HTML:
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
CSS:
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.
Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.
You need to add border-bottom and background color on hover.
See this Demo http://jsfiddle.net/enve/VjhJ4/7/
see this DEMO. you need to set the background color etc on hover
Change:
a:hover { text-decoration: underline; }
to (changing the color to whatever color you actually want):
a:hover { text-decoration: underline; background-color:red; }
and change:
a { text-decoration: none; color: #00b7f3;}
to (changing the color to whatever color you actually want):
a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}
Demo: http://jsfiddle.net/KqaC8/
Edit: This will only do the hover color, working on the bottom color when not hovering, please hold.
Edit 2: This should do everything you want now.
http://codepen.io/anon/pen/wqpdI
Here's an example I made with what I believe you need. It's actually very simple, and there are many ways to do it! Basically each link (or it's parent) would need a class, and then you can change the colors for each class's tag.
I understand that you do not understand much of CSS, and you buy a template, so you must not knowing much of it.
Thats okay, so before all people send you stuff and solutions that you don't understand, i updated your fiddle with the result like the picture you referring at:
This is your fiddle
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }
ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}
ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}
ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
If you don't want to modify the CSS you in the template you have, you can do something like this...
li.menu-item:hover{background:red !important;}
The !important will just override the templates styles
Here is a fiddle that gives you some basic css.. you can still use !important to make sure it overrides your template code http://jsfiddle.net/cX5bk/
I have a little problem with the visited pseudo-class and the text-shadow property in CSS.
Here is my code:
li.episode a{
display: block;
float: left;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 1px;
padding: 5px;
font-size: 14px;
background-color: #eeeaea;
text-shadow: 0 1px 0 white;
}
li.episode a:visited {
background-color: #23EE44;
text-shadow: none;
color: white;
}
li.episode a:hover {
background-color: #23EE44;
text-shadow: 0 1px 0 #10C72E;
color: white;
}
In fact what I would like to have is the visited link just the same as when hovered.
:Hover works fine on Chrome/Safari but the visited link keeps the first text-shadow property:
text-shadow: 0 1px 0 white;
Instead of the one given below (I tried to use "none" in my code but doesn't seem to work..)
Thanks guys for your help !
There are a very few css properties you can explicitly define for :visited due to security issues.
MDN defines the modifyable properties as (these may vary by browser, but text-shadow is certainly one that shouldn't work on any browser, at least modifying the size of it):
color
background-color
border-color
outline-color
And in addition you won't be able to define opacity or show/hide the links if the base a selector has done one of those things.
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important