I got a li element on my page which is <li class="basket last items">.
If the user hovers over that li another div is shown which is <div class="articles">. I want to delay the disappearance of the div on mouseout.
My current css rules:
#headlinks li.basket div.articles {
padding:5px;
width:380px;
z-index:100;
position:absolute;
border:1px solid #405ade;
-webkit-transition: display .5s all;
-webkit-transition-delay: 5s;
-moz-transition: .5s all;
-moz-transition-delay: 5s;
-ms-transition: .5s all;
-ms-transition-delay: 5s;
-o-transition: .5s all;
-o-transition-delay: 5s;
transition: .5s all;
transition-delay: 5s;
}
#headlinks li.basket:hover div.articles {
z-index:1000;
display:block;
background-color:#fff;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
-transition-delay: 0s;
}
I thought with that rules the mouseout should be delayed by 5 seconds but it's not working.
Edit: Here is a jsfiddle of my problem http://jsfiddle.net/21tn6bq6/ I left out unnecessary css but basically that's my problem. I want the div to stay for some more seconds after mouseout.
The display property is not "animable", the transitions don't work with it. You need to change it to opacity or something else. And also you need to swap the transitions properties to get the effect that you want.
FIDDLE: https://jsfiddle.net/21tn6bq6/4/
I think you have your delays switched. Your current CSS shows a delay on mouseover, not mouseout
Related
I'm looking at code like this:
.my-element:nth-child(1) {
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.my-element:nth-child(2) {
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.my-element:nth-child(3) {
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Is there a way in CSS only to do some sort of loop, i.e in sudo code:
For each element, delay fadein + 0.1s
Then I will get the effect of having each row fade in one after the other without having to specifically write CSS for nth child all the way up to 50. This is my test HTML table to test:
https://jsfiddle.net/268n9gcq/
Is this possible without having to use javascript?
To do this with only CSS you'll need to create nth-child() rules as you've already started. Less, Sass or another compiler will help keep your code more manageable, and create a CSS-only solution at the same time.
In the CSS compiler you'll create a loop similar to this (for SCSS):
#for $i from 1 through 10 {
tr:nth-child(#{$i}) {
$time: $i * 3 + unquote('');
$delay: unquote('0.' + $time + 's');
animation-name: showRow;
animation-duration: 1s;
animation-delay: $delay;
animation-timing-function: ease-in;
}
}
How can I add some time to the "onmouseover" tag in HTML?
What I want is when the user moves the mouse pointer over a certain "div" it should appear. And when the mouse leaves the "div" that "div" should disappear. This is what I have done so far.
But I need that when the mouse leaves the "div" that "div" must disappears after e.g. 5 sec. How can I do it?
I cant share my code right now, but there is an example jsfiddle.net/AdamMartin121/pk3EB When the mouse pointer located inside red borders it shows a photo, when the pointer is outside, the photo disappears immediately, but I need a disappearance of the photo after some time
You can do this with CSS.
HTML:
<div class="holder">
<div class="hovered">same text</div>
<div class="popup">same text</div>
</div>
CSS:
.holder{
float:left;
position:relative;
margin-top:20px;
}
.hovered{
float:left;
padding:5px;
background:green;
}
.popup{
position:absolute;
bottom:100%;
left:100%;
background:red;
opacity:0;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
-webkit-transition-delay: 3s;
-moz-transition-delay: 3s;
-ms-transition-delay: 3s;
-o-transition-delay: 3s;
transition-delay: 3s;
white-space:nowrap;
}
.hovered:hover+.popup{
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
opacity:1;
}
DEMO
Can't believe you will use jQuery just for that.
CSS approach would be much faster and optimized. Still, if you want the JS-way, just changing your onmouseout function will work:
obj.onmouseout = function(){
setTimeout(hidePop, 5000);
};
Just that. No need to load a huge library for something you're already doing (just without the timeout).
See it here: http://jsfiddle.net/pk3EB/45/
Next step would be introducing the state of the popup so that you don't get weird behaviour when rapidly hovering/unhovering the obj div.
You can use jquery and setTimeOut function:
$('#yourdiv').mouseleave(function() {
setTimeout(function () {
$('#yourdiv').hide();
}, 5000);
I have 2 divs. When I hover the mouse over one div it expands changing the height. I want to make it display a text with fade in effect somewhere in the screen when I hover the mouse over that div and finally when I click on the div, I want to display another div or text somewhere in the screen again. This is the code I've created so far.
<style>
#container
{
width:212px;
position:fixed;
left:42.5%;
top:21.7%;
border: 0px solid red;
overflow: hidden;
}
#first
{
background-color:#fff;
width:67px;
height:212px;
-webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
-moz-transition:all 1s, -webkit-transform 1s;
-ms-transition:all 1s, -webkit-transform 1s;
-o-transition:all 1s, -webkit-transform 1s;
transition:all 1s, -webkit-transform 1s;
transition:all 1s, transform 1s;
float:left;
}
#first:hover
{
height:354px;
}
#second
{
background-color:#fff;
width:45px;
height:212px;
-webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
-moz-transition:all 1s, -webkit-transform 1s;
-ms-transition:all 1s, -webkit-transform 1s;
-o-transition:all 1s, -webkit-transform 1s;
transition:all 1s, -webkit-transform 1s;
transition:all 1s, transform 1s;
float:left;
margin-left:15px;
}
#second:hover
{
height:354px;
}
</style>
<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>
Any ides ? :/
Do you mean something like this?
http://jsfiddle.net/vLz3c/1/
I've created a pargraph inside the #second element, and made that show up while you hover the #second element.
It also increases the height.
EDIT:
http://jsfiddle.net/vLz3c/2/
Now i have used the jQuery function fadeIn when hovering the #second box.
EDIT 2:
http://jsfiddle.net/vLz3c/3/
Now the paragraph also fades out, when you move your mouse away from the #second box
EDIT: 3
As promised, when you click the #second element, the #third element fades in.
http://jsfiddle.net/vLz3c/4/
I have the following code of CSS3 for regular browsers and those with -webkit- suport.
But, what value should I really set for the following property:
-webkit-transition-property: ????;
Because a value like box-shadow is -webkit-box-shadow for -webkit- related usages, and then, for the above property, should I use box-shadow or -webkit-box-shadow?
If you want to have a transition of a property which also uses vendor prefixes itself, you need to add them.
Example CSS:
.my-class {
-webkit-transition: -webkit-box-shadow 1s;
-moz-transition: -moz-box-shadow 1s;
-ms-transition: -ms-box-shadow 1s;
-o-transition: -o-box-shadow 1s;
transition: box-shadow 1s;
}
With unprefixed properties it works like this:
.other-class {
-webkit-transition: color 1s;
-moz-transition: color 1s;
-ms-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
}
Browser support:
CSS3 transition
CSS3 box-shadow
You should use the corresponding vendor-prefixed property.
-webkit-transition-property: -webkit-box-shadow;
-moz-transition-property: -moz-box-shadow; /*For older versions of Firefox only*/
transition-property: box-shadow;
Check this example:
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
is the same as (using shorthand version):
div {
transition: width 1s linear 2s;
-webkit-transition: width 1s linear 2s; /* Safari */
}
Here http://caniuse.com/#feat=css-transitions you can find when you need prefixes for transitions. There is a nice example here http://jsfiddle.net/davidThomas/XEWhk/1/ from another similar question that helps a lot.
I have a nice animation set up so I have a bullet shooting a star that then rotates all after you hover over the gun, All works as it should but.......
After you take the mouse off the gun the star rotates the other way, Not good :( any ideas how to get it to stop?
I have tried to use 'active' instead but that doesn't work with an animation.
CSS
#star {
width:48px;
height:49px;
position:absolute;
z-index:5;
left:922px;
top:63px;
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
-ms-transition: all 4s ease-out;
transition: all 4s ease-out;
}
#gun:hover ~ #star {
-webkit-transform:rotateZ(340deg);
-moz-transform:rotateZ(340deg);
-o-transform:rotateZ(340deg);
-ms-transform:rotateZ(340deg);
transform:rotateZ(340deg);
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1
}
The nature of the :hover css selector is that it only applies when the hover is happening on the source element. So the reverse is triggered when the user no longer hovers because the :hover no longer applies. There are two ways to achieve what you want:
Use animations instead. Animations have animation-fill-mode, which when set to forwards causes an element to retain it's computed values set by the last keyframe encountered during execution. MDN has more info about it.
Here's how you'd do it in your CSS:
#gun:hover ~ #star {
-webkit-animation: rotate 4s forwards;
animation: rotate 4s forwards;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
Demo: http://jsfiddle.net/FPCMt/
If you don't want to use animations, you need to write some JavaScript. Use the hover event, because events don't depend on current state like :hover does. You will also notice I moved the transition-delay css to #star, as it can apply to that element the whole time to no effect. I've used jQuery for succinctness:
JavaScript:
$('#gun').hover(function() {
$('#star').css('transform', 'rotateZ(340deg)');
});
CSS:
#star {
width: 50px;
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
-ms-transition: all 4s ease-out;
transition: all 4s ease-out;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1
}
Demo: http://jsfiddle.net/FPCMt/4/
--OR--
You can achieve this with vanilla JavaScript too. I used a CSS class I called shot to apply the transform, since we are lacking jQuery's cross-browser help and it is cleaner that way:
JavaScript:
var gun = document.getElementById('gun');
var star = document.getElementById('star');
gun.onmouseover = function () {
star.className = 'shot';
};
CSS: (in addition to CSS from jQuery example)
#star.shot {
-webkit-transform:rotateZ(340deg);
-moz-transform:rotateZ(340deg);
-o-transform:rotateZ(340deg);
-ms-transform:rotateZ(340deg);
transform:rotateZ(340deg);
}
Demo: http://jsfiddle.net/FPCMt/6/
You can simply specify different transition-delay for transition from non-hovered state to hovered and from hovered to non-hovered. Very large delay for the latter transition, e.g.
#star {
/*
other styles here
*/
transition-delay: 9999s;
}
will make the transition appear to be "one way". Here is the JSFiddle example.