I tried my method here,
.Subscribe-button:hover {
background-color : rgba(150, 0, 0, 0.917);
transition : background-color 1s;
}
.Subscribe-button:active {
background-color : black;
}
and it works but you have to hold your mouse click for the event to happen and I want to make the transition activate only for the hover.
P.S. I'm new to HTML and CSS and this is just a sample of the code I used.
Since it's the same transition selector and same element it will animate. One way to do that is to add a pseudo-element to the button and change the color of that one for :active instead. Here is how:
.Subscribe-button:hover {
background-color : rgba(150, 0, 0, 0.917);
transition : background-color 1s;
}
.Subscribe-button{
position:relative
}
.Subscribe-button:before{
content: '';
display:block;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
z-index:0
}
.Subscribe-button:active:before {
background-color : black;
}
<div class="Subscribe-button">Press Me</div>
Use an extra background layer:
.Subscribe-button {
border: none;
padding: 20px;
background-color: #f2f2f2;
transition: background-color 1s;
}
.Subscribe-button:hover {
background-color: rgba(150, 0, 0, 0.917);
}
.Subscribe-button:active {
background-image: linear-gradient(black 0 0);
color: #fff;
}
<button class="Subscribe-button">Press Me</button>
Related
I see a lot of answers say to use jquery-ui animate() function, but this requires an import of an entire other library just to flip colors.
Is there a way I can stick with just jQuery and CSS only?
The problem: When I click a button, I would like another element to flash color to blue, then back to red (red is original color). Each time the user clicks the button, this color change behavior will repeat.
I have been able to get it to change colors to blue:
$(".my-button").click(function() {
$(".other-element").css("transition", "color .3s").css("color", "blue");
});
Is there a way I can do the same for changing the color back to red? Something simple like:
$(".my-button").click(function() {
$(".other-element").css("transition", "color .3s").css("color", "blue");
$(".other-element").css("transition", "color .6s").css("color", "red");
});
... Where the element changes to blue after .3s, and then back to red after .6s? Note, the above code doesn't work, it only shows red (never changes to blue).
I propose to do without third-party libraries at all. Here I create a css animation and with the help of a simple js code I add an animating class at the beginning, and then remove it at the end of the animation.
const button = document.querySelector('.my-button');
const other = document.body;
button.addEventListener('click', function() {
other.classList.add('active');
});
other.addEventListener('animationend', function() {
other.classList.remove('active');
});
body {
margin: 0;
background-color: #f00;
display: flex;
min-height: 100vh;
}
.my-button {
margin: auto;
background-color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
transition: .2s;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
}
.my-button:hover {
background-color: #ddd;
}
.active {
animation: bganim .6s;
}
#keyframes bganim {
0,
100% {
background-color: #f00;
}
50% {
background-color: #00f;
}
}
<button class="my-button">Click me</button>
Is there any way to do the opposite of :hover using only CSS? As in: if :hover is on Mouse Enter, is there a CSS equivalent to on Mouse Leave?
Example:
I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from #999 to black. How can I create the opposite effect when the mouse leaves the item area, with an animation from black to #999?
jsFiddle
(Have in mind that I do not wish to answer only this example, but the entire "opposite of :hover" issue.)
If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:
ul li a {
color:#999;
transition: color 0.5s linear; /* vendorless fallback */
-o-transition: color 0.5s linear; /* opera */
-ms-transition: color 0.5s linear; /* IE 10 */
-moz-transition: color 0.5s linear; /* Firefox */
-webkit-transition: color 0.5s linear; /*safari and chrome */
}
ul li a:hover {
color:black;
cursor: pointer;
}
http://jsfiddle.net/spacebeers/sELKu/3/
The definition of hover is:
The :hover selector is used to select elements when you mouse over
them.
By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
}
The opposite is using :not
e.g.
selection:not(:hover) { rules }
Just use CSS transitions instead of animations.
A {
color: #999;
transition: color 1s ease-in-out;
}
A:hover {
color: #000;
}
Live demo
Put your duration time in the non-hover selection:
li a {
background-color: #111;
transition:1s;
}
li a:hover {
padding:19px;
}
Just add a transition to the element you are messing with. Be aware that there could be some effects when the page loads. Like if you made a border radius change, you will see it when the dom loads.
.element {
width: 100px;
transition: all ease-in-out 0.5s;
}
.element:hover {
width: 200px;
transition: all ease-in-out 0.5s;
}
No there is no explicit property for mouse leave in CSS.
You could use :hover on all the other elements except the item in question to achieve this effect. But Im not sure how practical that would be.
I think you have to look at a JS / jQuery solution.
Another way of using transition is just specifying the milliseconds like so: transition: 500ms;
Try the following snippet
div{
background: DeepSkyBlue;
width:150px;
height:100px;
transition: 500ms;
}
div:hover{
opacity: 0.5;
cursor:pointer;
}
<div>HOVER ME</div>
You can use CSS3 transition
Some good links:
http://css-tricks.com/different-transitions-for-hover-on-hover-off/
http://www.alistapart.com/articles/understanding-css3-transitions/
Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a "transition" property and that is all you need
ul li {
display: inline;
margin-left: 20px;
}
ul li a {
color: #999;
transition: 1s;
-webkit-animation: item-hover-off 1s;
-moz-animation: item-hover-off 1s;
animation: item-hover-off 1s;
}
ul li a:hover {
color: black;
cursor: pointer;
-webkit-animation: item-hover 1s;
-moz-animation: item-hover 1s;
animation: item-hover 1s;
}
#keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-moz-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-webkit-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-moz-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-webkit-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
</ul>
Although answers here are sufficient, I really think W3Schools example on this issue is very straightforward (it cleared up the confusion (for me) right away).
Use the :hover selector to change the style of a button when you move
the mouse over it.
Tip: Use the transition-duration property to determine the speed of
the "hover" effect:
Example
.button {
-webkit-transition-duration: 0.4s; /* Safari & Chrome */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
In summary, for transitions where you want the "enter" and "exit" animations to be the same, you need to employ transitions on the main selector .button rather than the hover selector .button:hover. For transitions where you want the "enter" and "exit" animations to be different, you will need specify different main selector and hover selector transitions.
You have misunderstood :hover; it says the mouse is over an item, rather than the mouse has just entered the item.
You could add animation to the selector without :hover to achieve the effect you want.
Transitions is a better option: http://jsfiddle.net/Cvx96/
The opposite of :hover appears to be :link.
(edit: not technically an opposite because there are 4 selectors :link, :visited, :hover and :active. Five if you include :focus.)
For example when defining a rule .button:hover{ text-decoration:none } to remove the underline on a button, the underline shows up when you roll off the button in some browsers. I've fixed this with .button:hover, .button:link{ text-decoration:none }
This of course only works for elements that are actually links (have href attribute)
This will add background color to the .icon when hovered and background fades when mouse pointer left the element..
.icon {
transition: background-color 0.5s ease-in-out; /* this is important */
}
.icon:hover {
background-color: rgba(169, 169, 169, 0.9);
}
This question already has answers here:
Change background image opacity
(9 answers)
Closed 1 year ago.
Suppose that I have a div element and I would like the opacity of the background color element (not the text) to be gradually increased in a given amount of time (not immediate change), where the initial opacity is 0, and the ending opacity to be either 1 or a smaller decimal like 0.7.
For instance, I would like the background-color of a div to be from rgba(90, 129, 229, 0) to rgba(90, 129, 229, 3) in 3 seconds.
I tried making a the opacity value #keyframes, but I would like it to target only the background color.
I would like a solution in vanilla HTML and CSS.
Thanks. Please let me know if the explanation of the question is too simple and more information is needed.
I did an example in codepen below there is the code https://codepen.io/Eros-C/pen/NWjzGOB
HTML
<div class="form"></div>
CSS
.form{
width:100px;
height:100px;
animation: animatedColor 3s linear;
}
#keyframes animatedColor{
0%{
background-color: rgba(90, 129, 229, 0);
}
100%{
background-color:rgba(90, 129, 229, 3);
}
}
If the background is a color you can simply do:
.background {
background-color: black;
animation:fade 3s forwards;
}
#keyframes fade {
to {
background-color: white;
}
}
<div class="background">
Hello World!
</div>
If the background is an image, you'll have to position a layer on top of the background image that uses rgba() to change the opacity:
.background{
background:url(https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=24&d=identicon&r=PG&f=1);
}
.layer{
height:100%;
width:100%;
background-color:rgba(255, 255,255,0);
animation:fade 3s forwards;
}
#keyframes fade{
to{
background-color:rgba(255, 255,255,1);
{
}
<div class="background">
<div class="layer">
Hello World!
</div>
</div>
Transition might be all you need:
document.querySelector('#toggle').addEventListener('click', () => {
document.querySelector('#fade-box').classList.toggle('faded');
});
/* The relevant CSS: */
#fade-box {
background-color: rgba(255,0,0,0);
transition: background-color 3s ease;
}
#fade-box.faded {
background-color: rgba(255,0,0,0.7);
}
/* Throwaway styles for working example: */
body {
background: #655b54 url(https://mars.nasa.gov/imgs/mars2020/jezero-overview.jpg) center center / cover no-repeat;
}
#fade-box {
font: bold 20px Arial, sans-serif;
width: 120px;
height: 120px;
border: 2px solid white;
padding: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
<div id="fade-box">My background fades</div>
<button id="toggle">Click Me to Fade!</button>
EDIT Demo is here : http://3.cnxical.appspot.com
The text-shadow property changes on hover, and with animation-fill-mode set forwards the state persists.
The animation for the :active state does not work, and nothing happens when the title is clicked.
The expected behaviour is the title should disappear because the text-shadow property was set to (and both of these were tried) none or 0 0 1px transparent. Setting text-shadow for :active was also tried without an animation and it did not work.
How can the correct behaviour be achieved?
The code is :
#title {
position:absolute;
cursor:pointer;
text-align:center;
top:15%;
left:50%;
-webkit-transform:translate(-50%,-50%);
color:transparent;
text-shadow:0 0 10px lime;
font-size:5vmin;
font-weight:bold;
font-family:"Courier New",Courier,monospace;
-webkit-animation: push_title_focus 0.3s;
}
#title:active {
-webkit-user-select:none;
-webkit-animation: vanish_title 0.3s;
}
#title:hover {
-webkit-animation: pull_title_focus 0.3s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes pull_title_focus {
from { text-shadow: 0 0 10px lime; }
to { text-shadow: 0 0 1px lime; }
}
#-webkit-keyframes push_title_focus {
from { text-shadow: 0 0 1px lime; }
to { text-shadow: 0 0 10px lime; }
}
#-webkit-keyframes vanish_title {
from { text-shadow: 0 0 1px lime; }
to { text-shadow: none !important; }
}
When you press the mouse button down to activate the link, the mouse is still pointing to it, so it is still being hovered.
#title:hover and #title:active are equally specific, and the hover rule is defined last.
Any rules with properties that are specified in both rule-sets, will be overridden by the :hover rule (including -webkit-animation).
Reorder your rulesets so the :hover rule appears before the :active rule.
I have a div here with a button:
I want the contents of the div to be opaque while still keeping the semi-opaque background color.
The box will contain a menu.
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #1F5899 ;
height: 200px;
width: 400px;
padding: 20px;
opacity:0.4;
background-color: #6AA6D9;
}
div.calcMenuContents {
opacity: 1;
}
The Run button is contained within the calcMenuContents div:
<div id="calculationMenu">
<div id="calcMenuContents">
<button onclick="runCalculations(2)" class="insideMenu">Run</button>
</div>
</div>
How may I make it so that the calcMenuContents are not semi-transparent?
Update: Thank you, BoltClock for the alternate solution (to set specific attributes of a div, instead of for the entire div).
My only issue is that the parent
There is a solution! Use rgba background values and you can have transparency wherever you want :
#calculationMenu
{
background: rgba(0, 0, 0, 0.4);
/*opacity: 0.4;*/
padding: 20px;
}
div.calcMenuContents
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/2/
use rgba()
You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with rgba() values based on the opacity you had given it, and remove the opacity declarations altogether:
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px;
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
you can change the background-color into an RGBA, so you would get:
background-color: rgba(106, 166, 217, 0.4);
If I'm right
You can't change the opacity of child elements. Try to use semi-transparent .png image as background of "calculationMenu" div instead of solid color background and opacity.