This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 7 years ago.
I have a menu in which onHover apears a infobox, telling what the button does. How can I apply a delay so that the box apears let's say one second after i put my mouse over the button?
HTML:
<td class="info"><a id="login-edit_account" href="../login-edit_account.php">Edit account<span><div id="pointer"></div><p style="font-size:11px">Edit user's information.</p></span></a></td>
CSS:
td.info {
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none
}
td.info:hover {
z-index:25;
background-color:#fff
}
td.info span {
display: none;
transition: 0s display;
}
td.info:hover span { /*the span will display just on :hover state*/
display:block;
position:absolute;
top:42px; left:7px;
width:210px;
border:2px solid #0cf;
padding: 5px;
background-color:#fff; color:#000;
text-align: center;
-webkit-transition-delay:5s;
}
#pointer {
border:solid 10px transparent;
border-bottom-color:#0cf;
position:absolute;
margin:-27px 0px 0px 10px;
}
It's really pretty simple. Example:
a {
-webkit-transition: 1s 3s;
}
a:hover {
background-color: red;
}
When the user hovers the link, the browser waits 3 seconds. Only when those seconds have passed does the background transition to red (in this case with a 1s transition time).
Here's a fiddle: http://jsfiddle.net/joplomacedo/VP7hE/
Yes, you can use CSS3's transitions to delay the :hover effect.
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
In your case I believe you need to focus on the transition-delay property.
Here are a few useful links in regard to using transitions/example use cases:
https://developer.mozilla.org/en-US/docs/CSS/transition-delay
http://css-tricks.com/transition-delay-delays/
http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/
Related
I'm currently attempting a do very specific kind of navigation bar for my website. The main 'feature' of it is that on hover over each menu item, the item itself grows, while both the item before and the item after moves x pixels away from the item.
The styling of these elements is what would perform these transformations, using the following:
.navitem{
display:inline;
transition: transform .75s ease-in-out;
}
.navitemRight {
transform: translate(10px);
}
.navitemLeft{
transform: translate(-10px);
}
.navitemCenter{
text-shadow:0px 0px 1px black;
transform: scale(1.20);
}
The problem is that there seems to be no way to apply these style whenever an item is hovered. It seems as though for each item, they should have these kind of stylings :
.item2 : hover ~ item 1{
blabla
}
.item2 : hover ~ item 3{
blabla
}
but they should generated somehow, since the navigation bar's items are dynamic.
I tried using React and really thought I was going to get away with it, where onMouseEnter and onMouseLeave changed the state of the component, and everytime, it would re-render the navbar, with the correct style, like so:
almost working but ugly when hover out
But it does not satisfy me because we only get the transform when hovering, and lose the transition whenever the state changes, which is why the change is so ugly when I hover out. For reference, here's an example of what it looks like when you have the same trasnform and transition:
simple transform
Anyways, I am sure there is a way to do it, using Javascript probably, maybe sass or Jquery, both of which im not really familiar with. If you have any idea, or maybe a reference to tools that could help me with that, it would be very apprecited!Thanks
You can apply conditional classes on each element, based on your component state. The conditional classes will be added/removed based on template string literals
Here's an example that does basically what you want, but through a different method. It's all in CSS so it will not have and rendering issues.
I've moved all .nav-links to the left 10px if they aren't being hovered (this is therefore their default state).
Once you hover on one this will increase in size by 1.2 as you would like.
All subsequent .nav-links after the hovered one (using the subsequent sibling selector ~) will move to the right by 10px to accomodate the increase in size.
You can fine tune this to your preferences, but at least it gives you a nice structure to work from and looks reasonably slick I think!
Demo
nav {
padding: 0px 24px;
}
.nav-link {
display: inline-block;
transition: transform .75s ease-in-out;
background: whitesmoke;
height:20px;
width:40px;
padding: 4px 8px;
text-align: center;
}
.nav-link:not(:hover) {
transform: translate(-10px);
}
.nav-link:hover {
transform: scale(1.2);
}
.nav-link:hover ~ .nav-link {
transform: translate(10px);
}
<nav>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
</nav>
So I used a codepen to implement buttons into my homepage here. The buttons work, but the issue is now the ToDo (+) button on the right, and the ToDo (x) button which appears after adding one, also have the effect of the button ToDo(+). Specifically, hovering over them has two parallel lines swing in from opposite ends. How do I separate them from each other so one doesn't affect the other? The specific css code is here:
button{
background:#00000088;
color:#fff;
border:none;
position:relative;
height:40px;
font-size:1.2em;
padding:0 1em;
cursor:pointer;
margin: 0 0.25em;
transition:800ms ease all;
outline:none;
}
button:hover{
background:#ffffff;
color:#000;
}
button:before,button:after{
content:'';
position:absolute;
top:0;
right:0;
height:3px;
width:0;
background: #bd818d;
transition:400ms ease all;
}
button:after{
right: inherit;
top: 47px;
left: -5px;
bottom: 0;
}
button:hover:before,button:hover:after{
width:100%;
transition:800ms ease all;
}
This is where the problem is:
button{ /* YourStyle */}
This is telling your browser that it must apply YourStyle above everywhere where it sees a button element. And your browser, remains loyal and obeys your instructions. To solve this, you must give a button names that defines it.
Example:
<button class='todo add'></button>
<button class='todo close'></button>
Referencing these buttons with css:
/* When you want to reference all buttons */
button{} or .todo{}
/* When you wish to target the todo add only */
.todo.add{} or .add{}
/* When you wish to target the todo close only */
.todo.close{} or .close{}
try giving your buttons class names or id and referencing them from css styles.
Instead of applying styles to button, you can make use of classnames to give specific styles to separate buttons.
The classname containing common styles can be given to both, and the specific ones can be in their respective classnames.
I have a blue back grounded div that will be animated to top on hovering on it . I need the div to follow the same effect and reach its original position on UN hovering form it Source code attached . Should i write separate coding for it? The blue color div comes back very quickly when i UN hover it
HTML
<div id="wrapper">wrapper<div id="lion">Hover</div></div>
CSS
#wrapper{ position:relative;top:30px;height:140px;width:150px;overflow-y: hidden;}
#lion{position:relative;width:100px;height:50px;top:20px;padding:20px; background-color: blue;}
#lion a {color:black;text-decoration: none;}
#lion:hover{transform: translateY(-70px);transition-duration: 2s;}
If you add transition-duration: 2s; to the #lion. The blue shape should transition back to original position when hover is removed. Use the css below. Also you can see it working on this jsfiddle.
#wrapper{
position:relative;
top:30px;
height:140px;
width:150px;
overflow-y: hidden;
}
#lion{
position:relative;
width:100px;
height:50px;
top:20px;
padding:20px;
background-color: blue;
transition-duration: 2s;
}
#lion a {
color:black;
text-decoration: none;
}
#lion:hover{
transform: translateY(-70px);
transition-duration: 2s;
}
It seems that you missing the transition property in #lion unhover. Try to add transition-duration in #lion selector. Now with your code, when hover #lion transition is 2 seconds, but in unhover is not duration and is not transition. Good luck
This question already has answers here:
Simple CSS button with a rectangle beneath
(4 answers)
Closed 9 years ago.
I'm trying to create a CSS based 'button' like this:
The blue is just a background, so it's only about the text "Welkom" and the rectangle displayed below.
Whenever it's active or hovered over it should display a rectangle BELOW the button.
HTML: (This is the button)
<li>Welkom</li>
If the below is your HTML:
<li>Welkom</li>
Then you can do this:
li:hover,li:active{
border-bottom:3px solid blue; /*change blue to the color you want*/
}
See this demo
Fiddle in response to comment: Fiddle 2
The above uses box-align property(http://www.w3schools.com/cssref/css3_pr_box-align.asp) to center the bottom border(without requiring adjustment) but it will not work in IE9 and below
Fiddle 3 : Will work in all browsers but you will have to adjust the bottom at the center using relative positioning for both li and a tag within it.
you can do that on :hover with a border-bottom:
But you may and a border already without the hover so avoid jumping.
a {
border-bottom: 5px solid transparent;
}
a:hover {
border-color: blue
}
The code above is not all you may need.
-Sven
EDIT: as you see the other answer, U ay do that on the list element directly.
simple just follow below code:
HTML:
<div class="link">Welkom</div>
CSS:
.link { background-color:#379AE6; width:100%; padding:8px; padding-bottom:16px; }
.link a{ font-family:arial; text-decoration:none; color:#fff;
}
.link a:hover{ border-bottom:8px solid #6BBBF8; padding-bottom:8px;
}
I have created a menu with li elements. When li:hover, i would like to approximate list-style bullets to the text, and there would be a color changing too. (Both of them with transition, so background-image is unfit!)
I have already tried so many different ways, with relative positioning, and different margin settings, but none of them works properly. Is there any solution?
(BTW, sorry for my poor english!)
Give this a whirl:
ul {
list-style:none;
margin:0;
padding:0;
}
ul li:before {
content: "\2022";
opacity:0;
padding:0 5px 0 10px;
margin:0;
transition:opacity 1s;
}
ul li:hover:before {
opacity:1;
}
As suggested by #FK32 - we can use the :before pseudo-class to simulate a bullet point, by using the unicode character \2022\. We then initially set it's opacity to 0 and when the user hovers on the list item we change the opacity to 1, by apply a transition:opacity 1s so that we fade it in and out.
I removed any margin or padding that a user agent / custom stylesheet may have applied, and then adding padding to the pseudo so that you can more accurately space your list item's content from your bullet.