I want to change the background color of the page when one hovers over a button/div tag using only CSS3 transitions. I want the color to come gradually and hence would like to use a transition effect, but I don't know how to relate the background color of the page to a hover event on a div. Can someone please help me with my code ? Thank You
This is not currently possible in CSS3.
In the future (CSS4?), you'll be able to do it as follows:
body {
background-color: red;
transition: background-color 1s ease;
}
$body #theButton:hover {
background-color: green;
}
Note the $ in the second selector; It indicates which element the CSS block applies to. Unfortunately, there's not even a single implementation of this yet, so you'll have to resort to Javascript (which I assume you know how to do. If not, just ask).
Update (using jQuery):
CSS:
body {
background: red;
transition: background-color 1s ease;
}
body.hover {
background: green;
}
Javascript:
$('#theButton').hover(function(){
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
Here's the fiddle: http://jsfiddle.net/mWY88/1/
For maximum efficiency, you should cache your selectors.
In fact, you can change the body background-color very easily with CSS3 transition animation like I'm doing it here. I got the logic from here.
Related
I am looking for the way to smoothly hide html element and then remove it at all to deny any interaction with hidden elements. I change css property "opacity" from 1 to 0.00001 to do this. The problem is that element hide, but it's still on the screen and user can hover it. Is it possible to remove transparent element using display:none without JavaScript? I tried to do this with CSS attribute selectors, but it does not work.
.element[opacity^=0.00001] {
display:none;
}
http://jsfiddle.net/DkX3L/
Since you're probably already using JavaScript to hide the elements, the best method would be to use that to stop the interaction as well. But since you've asked for a CSS solution, you could use this (IE11+):
.element {
-webkit-transition: 2s;
transition: 2s;
}
.element:hover { /* .element.hidden */
opacity: 0;
pointer-events: none; /* <-- This one */
}
DEMO
I'm back at it, this time trying to tackle using CSS3 transitions in place of jQuery based transitions, using Modernizr as a backup for browser compatibility.
I'm setting up my base class with the following:
.box { transition: left 0.5s ease; }
.box-left { left: calc(left - 300px); }
.box-right { left: calc(left + 300px); }
In jQuery, I'm using toggleClass when a "next" or "previous" button is clicked.
You can see I'm attempting to add or subract from the current left value, but it's obviously not working that way.
Any pointers? I hope I'm being clear enough about my question.
Thanks!
EDIT:
I'm giving calc() a shot, but I have no idea what would go onto the left side of the operator.
I found the solution. So, like before, I define the transition in CSS:
.box { transition: left 0.5s ease; left: 0px; }
But, when it comes time to animate, I use jQuery to update the style attribute with a calculated left value:
$('.box').css({'left':-(currentLeft) * multiplier});
How can I keep my divs in the hovered state permanently once initially hovered?
Ideally I need something that is going to work with the existing code (if possible) as there are many instances:
#cover:hover img{
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
}
If you are asking to hover over an element, and continue display that element after the cursor has moved away from it, this cannot be done in CSS. It must be done with Javascript.
I would create a class for the state after the image is hovered and before, like so.
.hover-to-change {
opacity: 0.0;
-webkit-transition: all 0.2s ease-in-out;
}
.hovered {
opacity: 1.0;
}
Then add some jQuery to change the class when the image is hovered.
$(document).ready(function() {
$(".hover-to-change").mouseenter(function() {
$(this).addClass('hovered');
)};
});
This should work.
Because CSS is only markup, it will not actually change the state of the HTML or CSS unless it is immediately specified in the page. But the -webkit-transition should work without any additional jQuery.
I know there are a lot of other questions on using transitions on CSS pseudo element but after going through a whole bunch of them I still can't get my scenario to work.
Basically, I want to add a class to an element, the class has a :after pseudo element with some content and a background. I'd like a fading effect on the :after element when adding or removing the class.
I've been trying this out in this jsfiddle and the code I have so far it this:
HTML
<div id="divA">Div test</div>
<button id="btnAdd">Add it</button>
<button id="btnRemove">Take Away</button>
CSS
div {
width: 200px;
transition: all .5s linear;
background: red;
}
.test{
background: blue;
}
.test:after{
background: #0c0;
content: "Test";
}
jQuery
$("#btnAdd").click(function() {
$("#divA").addClass("test");
});
$("#btnRemove").click(function() {
$("#divA").removeClass("test");
});
Any help and hints would be most appreciated.
Forking #NilsKaspersson answer to make it work with your requirements.
Transition means from X to Y, you can't expect it to work with newly created attributes.
Then you have to create an initial attribute, and alter it later.
Since you don't want it to be there at the beginning, just use color: transparent; and background: transparent;
Running Demo
Code:
div {
width : 200px;
transition : all .5s linear;
background : red;
}
div:after {
transition : all .5s linear;
background : transparent;
color : transparent;
content : "Test";
}
.test{
background : blue;
}
.test:after{
background : #0c0;
color : black;
}
There are two things going on here.
1.) transition only works when there's something to transition from. Since your :after element is essentially created when the class test is added to it, there's no transition going on.
2.) transition doesn't inherit, so you'll need to declare it once again on the pseudo element.
Here's a quick n' dirty fork of your JSFiddle.
I moved the generic rules for the pseudo element to the classless div and added a transition to it. Then when the class test is added to it, the background changes and it can transition from it's old value.
If you don't want the pseudo element's content to be visible all the time, consider hiding it with opactiy: 0 and transition that to 1, or use the transparent color value for background and/or color.
Edit: Changing answer based on new fiddle.
On most case, CSS transition must apply on already-defined properties.
Additionnaly, the changing of a pseudo :after element content will make the element be removed and re-added, which removes the said properties at the same time.
I have made a demo with animating the text color and background-color while pre-setting the content, so the properties are already present.
CSS :
div {
width: 200px;
transition: all .5s linear;
background: red;
}
div:after {
transition: all .5s linear;
background: red;
color: red;
content: 'Test';
}
.test{
background: blue;
}
.test:after{
background: #0c0;
color: black;
}
Fiddle : http://jsfiddle.net/W5e9Q/10/
First of all I have to say that I'm working on website which I can only manipulate its CSS.
So, please don't suggest me a javascript/html solution.
Here is my problem,
You can see in this jsFiddle demo, there is a basic toggle display method but it doesn't have a transitions effect on default CSS. The HTML is exactly like that, and I don't have a permission to change its HTML or javascript, I can only play with CSS.
I want to add CSS 3 Transitions effect to this toggle method.
As Jim Jeffers's answer on this question, transitions effect never works on
display: block < - > display: none
So I will always need to keep the element display block.
I tried this but it didn't work,
.infocontent {
-webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent {
opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
display:block !important; opacity: 0; height: 0px;
}
Why isn't it working? How can I do that?
Try to use transition on max-height instead of height.