I can't really understand why underline links does not shows up on dark mode (only on some browser on mobile).
The code is really simple:
a {
-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
border-bottom: solid 0.10em rgba(255, 255, 255, 1);
text-decoration: none;
color: inherit;
}
example
In dark mode it works fine on every desktop browser.
On mobile it works fine with Chromium and Firefox. But on Brave, Bromite and Privacy Browser the underline links just diseapper (otherwise, on light mode they works fine).
The same issue is with other borders.
Firefox Browser with borders:
Brave Browser without borders:
I can post the website link if it is ok.
I noticed that the border is still existent in brave browser but that it is dull it is my best advice apply filter:brighntnes(50%) to the element
CSS reset code:
.element {
-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
border-bottom: solid 0.10em rgba(255, 255, 255, 1);
text-decoration: none;
color: inherit;
border:5px solid #fff;
}
.element:before {
filter:brightness(50%);
}
.element > * {
filter:brightness(50%);
}
<div class="element">
example
</div>
It is because rgba is not supported by some browsers. I recommend you to add a fallback css with rgb colors. Or try with hex colors You can convert here.
After adding the fallback you're code should be looking like this.
a {
-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
border-bottom: solid 0.10em rgb(255, 255, 255); /*fallback here*/
border-bottom: solid 0.10em rgba(255, 255, 255, 1);
text-decoration: none;
color: inherit;
}
example
I have a button with a transition on hover
css
.main-nav li a {
position: relative;
display: inline-block;
padding: 12px 10px;
}
.main-nav li a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px; width: 0;
bottom: 3px; left: 0; right: 0;
}
.main-nav li a:hover { color: #d11e5d; }
.main-nav li a:hover:after { width: 80%; }
/* other links */ .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
html (generated from bootstrap/Wordpress)
<div class="main-nav">
<ul class="menu">
<li>
...
The after element animates in properly, but doesn't animate out (just stops abruptly)
The problem is that you are using the transition property in your :hover state.
Change this:
...other links... , .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
To this:
...other links... , .main-nav li a, .main-nav li a:after {
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
If you're wondering what is the difference between applying CSS transition property in hover rather than in its normal state, you can check this.
Notes:
Always make sure the property without vendor prefixes is placed
below the rest.
I see some issues in the last CSS block:
...other links... , .main-nav li a:hover, .main-nav li a:hover:after {
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
As a minor fix, I'll point out that the vendor prefixed transition properties should always precede the "standardized" CSS property. In other words, order the unprefixed transition style to be last following those for -webkit-, -moz-, -ms- and -o-. See this response SO answer to prefix ordering.
I notice you include the .main-nav li a:hover:after CSS selector. If this is what you're using to try and effect a CSS transition when hovering off, it won't work. The :after pseudo-element is not for this usage. Rather, what you want is to apply the transition styles you declared on .main-nav li a. Notice I didn't include the :hover pseudo-element. That's intentional. This way, I'm saying "I want to transition these properties (width, background-color & border) when I DO hover onto the selected element". Then, apply the different width, background-color and border CSS styles on the .main-nav li a:hover element separately. These will be the property styles that get transitioned to once you hover over the link. You'll notice that when you hover over the link now, the styles transition as desired.
If you're also trying to apply a secondary transition when hovering off the link, you'll have to apply those styles separately for the .main-nav li a:hover selector. Additionally, you would then declare a transition property on the .main-nav li a:hover selector. As it stands now, you have the same transition being applied to both the .main-nav li a and .main-nav li a:hover selectors (which is technically fine, just maybe not what you wanted). See this post Different Transitions for Hover On/Off
.main-nav li a {
position: relative;
display: inline-block;
width: 25%;
font: bold 3rem/2 Fantasy, Arial, sans-serif;
padding: 12px 10px;
}
/* .main-nav li a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px; width: 0;
bottom: 3px; left: 0; right: 0;
} */
.main-nav li a:hover {
width: 50%;
color: #d11e5d;
background-color: Yellow;
font: lighter 5rem/3 cursive, serif;
}
.main-nav li a:hover:after { width: 80%; }
/* ...other links */
.main-nav li a {
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease;
}
.main-nav li a:hover {
-webkit-transition: font 0.2s linear;
-moz-transition: font 0.2s linear;
-ms-transition: font 0.2s linear;
-o-transition:font 0.2s linear;
transition: font 0.2s linear;
}
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div class="main-nav">
<ul class="menu">
<li>
...
</li>
</ul>
</div>
</body>
</html>
Last, I'm assuming the ...other links text is intended as a comment. If so, that should be commented-out appropriately, /* Other links */, and can potentially cause issues.
I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.
I am new to CSS Transition effects. I just added the transition for the background color to be changed as given in the code. But I didn't get the transition effect.
.ext-lnk:link
{
background-color:#1f5ea8;
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.ext-lnk:hover
{
background-color:#b32e37;
}
How to fix it?
I've been thinking about this issue for the past few days but I can't figure out what exactly is the problem.
Consider the following snippet from style.css:
.tint:before {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.tint:hover:before {background:rgba(159,182,205,0.1);}
As you can see from the code above, upon an image hover, a "tint" transition should occur as to make the user want to click on that image. However, this feature does not work in Chrome.
Why does the hover transition not work in Chrome yet works perfectly fine in Firefox?
Is this the expected behavior? Or does Chrome not render these transitions correctly?
The problem is related to the :before pseudo class. It doesn't seem like hover is being triggered on that class. If you remove it, it works just fine.
.tint {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.tint:hover{background:rgba(159,182,205,0.1);}
Here is the jsFiddle - http://jsfiddle.net/qGAn9/
UPDATE:
If :before pseudo element is needed, then you can trigger the hover on the parent element. I also had to add some additional styles to make the pseudo element appear on top.
.tint:before {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
content: "";
width: 100%;
height: 100%;
position: absolute;
}
.tint:hover:before{background:rgba(159,182,205,0.5);}
jsFiddle here - http://jsfiddle.net/qGAn9/2/