When I use the hover and visited properties on a styled component it seems to conflict.
https://codesandbox.io/s/heuristic-volhard-n03ik?file=/src/styles.css:0-326
.button:visited {
background-color: green;
}
.button:visited:hover {
background-color: red;
}
.button:hover {
background-color: blue;
}
.button {
background-color: black;
padding: 10px;
text-decoration: none;
transition: background-color 0.5s ease;
}
What I am trying to archive here is having 2 states:
not visited: black hover directly to blue
visited: green hover directly to red
But in Firefox it seems to ignore the visited state on hover and go from green to blue to red. (In chrome it seems to work perfectly)
Does anyone has experience with this and know how to fix it?
Related
I know that for designing and developing for accessibility, it is common for the &:hover and &:focus to have the same styling (mouse hover and tab focus). But I've run into the problem when I mouse click, release, and hover off the button, it remains in the &:focus state.
I thought adding styling to the &:active would solve it but I realized that it only affects when the button is clicked but not released.
Is there a way to keep the &:hover and &:focus the same but not have the focus styling stay if the user clicks on the button? I would prefer to avoid having to use javascript, but if that is the only solution then I am ok with that too. Thank you.
In the demo the first button is what I have right now. The current button is correct when tabbing, but not for mouse click. The second demo is what I expect for mouse click, but tabbing is incorrect.
edit
button {
height: 200px;
width: 200px;
color: white;
background-color: green;
transition: background-color 250ms ease-out;
}
/*button:hover, button:focus {
background-color: blue;
}
.btn2:focus {
background-color: green;
}
.btn2:hover {
background-color: blue;
}*/
button:hover {
background-color: blue;
}
button:focus:active {
background-color: blue;
}
<button class="btn1">Current Button Action</button>
<button class="btn2">Expected Button Action</button>
I solved my problem from this article: https://thoughtsandstuff.com/focus-style-css-for-keyboard-navigation/#what-about-focus-visible
Below is a CSS code snippet to transit a button from #33ae74 to #1ce when hover it.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
}
.button:hover {
background-color: #1ce;
transition: background-color 2s ease-out;
}
It works well. My question is: before mouse hover,there is no transition bind to the button,why transition works when hover it? In another case, when hover, transition bind to the button, meanwhile the background color also be changed to #1ce immediately,so there should no color be transited. but why we could still see the transition?
that's very simple just make the transition on the original element. By doing that the transition will work when you hover and will work when the over is done.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 2s ease-out;
}
.button:hover {
background-color: #1ce;
}
<button class="button">hover over me</button>
How do I change link and background colours of a.btn.btn-default / btn.btn-default? I can’t find these in any CSS.
See here: https://www.webhosters.co.za/client/whois . There are two buttons at the bottom of the 404 error page. These buttons (home page and contact support) are in white text and white background. they are only visible when one hover over. How do I change the background and text?
Here is the small css snippet you can go through
section#main-body a.btn {
color: #fff;
background-color: #6aaf08;
border: 1px solid #6aaf08;
}
We are here inheriting button class Hope this helps
Happy coding!!
You can give class to that buttons and apply css on that like change in btn background and color
.contact-btn, homepage-btn{
background-color: #6aaf08 !important;
color: #fff !important;
}
or
you can add more parents to .btn-default so your css will be applied first and will be replace .btn-default property
#main-body .btn.btn-default {
background-color: #6aaf08;
color: #fff;
}
/* ------------------ or ------------ /*
if you don't want to add parents class in css you need to give important to that css property..
.btn.btn-default {
background-color: #6aaf08 !important;
color: #fff !important;
}
Great place for styling links is here
so, basically you would be looking for something like:
/* unvisited link */
a:link {
color: red;
background-color: white
}
/* visited link */
a:visited {
color: green;
background-color: white
}
/* mouse over link */
a:hover {
color: hotpink;
background-color: white
}
/* selected link */
a:active {
color: blue;
background-color: white
}
I am using Bootstrap 3. I have a button, but I am unable to preserve background color of that button when I hover it. No matter what I do, its background color is always grey.
.my-btn {
background-color: white;
color: #2b526d;
border-color: #2b526d;
margin-right: 0px;
margin-left: 0px;
}
.my-btn:hover {
background-color: white!important;
color: #dd3049;
border-color: #dd3049;
opacity: 1 !important;
}
I want the background of my button to remain completely white.
I'm not sure. But you can try the following css code. Hope it will work for you.
.btn.my-btn:hover {
background-color: white!important;
color: #dd3049;
border-color: #dd3049;
opacity: 1 !important;
}
I want to fade in a border on hover. I have the following but it starts off as nothing then goes to a 1px grey line (grey is default color) and then eventually goes to a 2px red line.
What am I going wrong?
a{
border-bottom: none;
transition: border-bottom 1s;
}
a:hover{
border-bottom: 2px solid red;
}
<a href='#'>hover here</a>
When an element has no border, then you add on hover you face a few issues such as page moving, drawing border from scratch etc
Solution: Try setting border to transparent first, so it's there but cannot be seen:
a {
border-bottom: 2px solid transparent; /* <- here */
transition: border-bottom 1s;
text-decoration: none; /* I added this for clarity of effect */
}
a:hover {
border-bottom: 2px solid red;
}
testing border
Edit
Actually, you don't need to declare the whole border again, just change the color:
a:hover {
border-color: red; /* <-- just change the color instead */
}
You need to provide a border by default to the hyperlink, which should be transparent in color. Later on hover, you may modify it's color. Leave the rest on the transition property.
See it yourself.
a {
border-bottom: 2px solid transparent;
transition: border-bottom 1s;
text-decoration: none;
}
a:hover {
border-bottom-color: red;
}
Demo Hyperlink
Cheers!
Why this happens
You get this because of your transition and the initial value of your element. All elements have default values, even when those aren't defined by you. For instance, <div> elements always have display: block per default and <b> elements have font-weight: bold per default.
Similarly, your <a> tag has border-bottom-color: rgb(0, 0, 0). This is true even when the thickness of the border is zero.
In chrome, you can see all of this in the "computed" section of the "Elements" tab:
So when the transition starts, it's going to gradually change the color from black to the red you defined.
How to fix
What you need to do is to override that default values, with your own. This is to prevent it from starting off as black.
a{
border-bottom: 2px solid transparent;
transition: border-bottom 1s;
}
a:hover{
border-bottom: 2px solid red;
}
A tip is to always define the same properties for an element "before" a hover and "during" one. Another thing you should be aware of is that using none as the initial value usually won't give you the behavior you want. Transitions need a numerical value as a start-off point (e.g 0).