I'm trying to build some sub-menus with fade in/out effects. Each sub-menu should fade in when the mouse hovers over the corresponding parent menu item. Here's my code so far:
.navbar ul ul {
display: none;
opacity: 0;
position: absolute;
top: -99999px;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity .1s linear;
-o-transition: opacity .1s linear;
transition: opacity .1s linear;
}
.navbar li:hover > ul {
display: block;
opacity: 1;
top: 100%;
-webkit-transition: opacity 0.35s ease;
-moz-transition: opacity 0.35s ease;
-o-transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
}
The Problem:
The sub-menu's fade effect does not work. When I hover my mouse over any parent item, the corresponding sub-menu displays instantly without the fade in/out effect.
The Solution (thanks to Cam):
.navbar ul ul {
display: block;
visibility: hidden;
-webkit-transition: opacity 0.35s ease-in;
-moz-transition: opacity 0.35s ease-in;
-o-transition: opacity 0.35s ease-in;
transition: opacity 0.35s ease-in;
}
.navbar li:hover > ul {
visibility: visible;
-webkit-transition: opacity 0.35s ease;
-moz-transition: opacity 0.35s ease;
-o-transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
}
Related
I am doing some basic CSS fill transitions on hover. I have used this codepen as an example: https://codepen.io/brandon4117/pen/ihIgE. Now on hover the background position raises to fill the div, and on hover off, the background goes back down. I wanted to know how can I modify this pen, to work such as when hover off the transition should go upwards, rather than down.
Most hover transitions: Hover on new fill top->bottom. Hover off new fill removes bottom->top. I would like to do on hover fill top->bottom, on hover off fill removes top->bottom again.
A look at the CSS being used:
div {border-style: solid;
border-color: black;
color: black;
padding: 50px;
background-size: 200% 200%;
background-image:
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position:0 100%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
div:hover {color: white;
border-color: #A72424;
background-image:
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position: 0 0%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}
a {color: black; text-decoration: none;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;}
a:hover {color: white;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
}
a:active {color: white;}
Thanks
Ok I got the answer: For top down do this:
.divclass::after {
position: absolute;
transition: 0.3s;
content: '';
height: 0;
top: 50%;
right: 0;
width: 3px;
background: #fff;
bottom: 0;
top: auto;
z-index: -1;
width: 120%;
}
.divclass:hover::after {
height: 100%;
top: 0;
}
Thanks for pointing me in the direction of pseudos Frderico
Everything else is working with the transitions etc... however when it sets the background-color it does not fade in but just instantly changes the colour. Anyone have any ideas?
Fiddle: https://jsfiddle.net/0zortp3g/1/
menuBackground is the class that gets set.
CSS:
header {
width: 100%;
height: 100%;
top: 0;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
background-color: transparent;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
transition: background-color 1s ease;
.header-toolbar {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
top: 35px;
}
h1 {
&.header-logo {
img {
display: inline-block;
height: 72px;
line-height: 72px;
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
}
}
nav {
&.header-desktop-nav {
position: relative;
top: 25px;
ul {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.header-nav-links {
.home {
padding-right: 26px;
}
}
}
}
&.smaller {
height: 100px;
position: fixed !important;
top: 0px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
&.homepage {
top: 42px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
}
h1 {
&.header-logo img {
height: 45px;
line-height: 45px;
}
}
nav {
&.header-desktop-nav {
top: 10px;
}
}
.header-toolbar {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
top: 50px !important;
float: right;
z-index: 1;
}
}
&.menuBackground {
background-color: #333333 !important;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-ms-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
transition: background-color 1s ease;
}
}
I have the following style on hover:
li:hover a {
left: 65px;
}
I know I can animate this with jQuery, but can it be animated with CSS3 alone?
This did not work:
li:hover a {
left: 65px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
You have to use this css:
li:hover {
left: 0px;
}
li:hover a {
left: 65px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
you have to set position if you want to use 'left' otherwise use 'margin-left'
here is an example: FIDDLE
I have .css which makes mine image darker on hover:
a.darken {
display: inline-block;
background: #222222;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.1;
}
I wonder how could I change it that it would be darkened on normal state and would be normal on hover?
Move the opacity: 0.1 to the normal state and revert it to 1.0 on hover:
a.darken img {
display: block;
opacity: 0.1;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 1.0;
}
I've got a <span> with some text in it and when you hover over it an image comes sliding down the page. So far so good. However, when your mouse accidentally hovers over the image, the animation will be stopped. I do not want that.
.coffee {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
z-index: 10;
}
.coffee:hover {
color: #B88A00;
}
.coffee img {
position: absolute;
display: block;
height: 100px;
width: 100px;
z-index: 1;
left: 280px;
top: 50px;
opacity: 0;
-webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.coffee:hover img {
top: 150px;
opacity: 1;
}
Any help would be much appreciated.
As per i understand may be that's you want. Write like this:
HTML
<span class="coffee"><u>coffee</u></span>!
<img src="image.jpg" alt="Coffee!"/>
CSS
.coffee:hover + img{
top: 150px;
opacity: 1;
}
Check this http://jsfiddle.net/quLKb/2/
You can use the pointer-events attribute. If you set it to none, mouse events are omitted on elements with that css-rule applied.
.coffee img {
pointer-events: none;
}
Here's the modified example: http://jsfiddle.net/kFd9g/