HTML:
<ul class="nav">
<ul>
<li>Home</li>
<li>A
<ul>
<li>X</li>
<li>Y</li>
<li>Z
</ul>
</li>
</ul>
</ul>
CSS:
.nav ul ul {
position:absolute;
visibility: hidden;
opacity:0;
width:170px;
margin:0;
transition:visibility 0s linear 0.3s, opacity 0.3s linear;
-webkit-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
-moz-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}
.nav ul li:hover > ul {
visibility: visible;
opacity:1;
}
I want the first level to fade in, on hover on a list item of the main menu, but it just doesn't seem to work. I have spent hours on it and I'm not sure what's really wrong. Any pointers?
If you need to see the complete code: http://paperbird.in/projects/BusinessConclave/index.php
Edit: Ok, you contributed your website, so here's the solution, actually the transition does work, but z-index is causing you an issue there, so it flicks the sub menu instantly.. though it transits, use z-index: 100; for .nav ul li:hover > ul on line 153 in style.css and make sure you remove visibility properties as they are not required.
First of all, your markup is invalid, you cannot nest ul as a direct descendant to ul so nest that in an li and secondly, you cannot transit visibility property, so only use opacity and get rid of the visibility property as well. If you want, you can also use animation-timing-function property with a value of linear for a consistent fadein and fadeout effect.
Demo
.nav ul ul{
position:absolute;
opacity:0;
width:170px;
margin:0;
-webkit-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
transition:opacity 0.3s linear;
}
.nav ul li:hover > ul{
opacity:1;
}
And make sure you declare properietary properties before general properties.
Related
I'm just trying to make a paragraph that becomes visible when I hover over it. In HTML I just have a paragraph inside the body, and I've also tried it in a div in the body.My code in CSS is just
p{
position:absolute;
visibility:hidden;
}
p:hover p{
visibility:visible;
}
First of all you cannot put <p> elements inside another <p>, that might be the problem. You can use a <div> or any of these as the container.
<div><p>paragraph</p></div>
div p {}
div:hover p {}
You can do this pretty easily with the opacity element in css. Do note that there are vendor specific usages with opacity and transition.
.hover-vis {
filter: alpha(opacity=0);
opacity: 0;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out
}
.hover-vis:hover {
opacity: 1
}
<p class="hover-vis">I show up when hovered on</p>
<p>I'm normal</p>
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 8 years ago.
I can't get transition to work on a website i'm working on. The nav menu hides and shows correctly, but it just appears instantly without tranistion. The CSS is this:
.nav ul li ul li {
display:none;
visibility:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
display:block;
visibility:visible;
}
and the HTML is
<div class="nav">
<ul>
<li>test</li>
<li>test
<ul class="sub-menu">
<li>test</li>
</ul>
</li>
</ul>
</div>
I have tested it in chrome, ffx, ie.
I actually got most of this code off another answer on this site, so i'm not sure what my problem is here.
I should have mentioned, I have tried opacity from other answers, but in a drop down menu, it won't work as the menu stays there.
The transition from display: none to display: block does not behave like you expect.
Work with opacity instead.
jsFiddle Demo
Try This CSS this will work fine
.nav ul li > ul {
opacity:0;
overflow:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
height:auto;
opacity:1;
}
Demo Here
display property does not work with transitions.
what itay suggested is valid,and you can play with other properties as well (position ?)
to make the desired effect.
My CSS calls for a background image that I want changed on a:hover. The class is working fine with the font color change, but I can't get my image to display anywhere.
<ul class="qualities_cycle">
<a href="http://spielconsulting.com/qualities/transition/" class="cyclehover">
<li class="grid_4">
<div class="title-wrap">
<h3>Partnership Transition</h3>
</div>
<h5>Lorem ipsum dolor sit amet consec</h5>
Seven out of ten Associateships fail - a devastating statistic. Spiel Consulting, however, sees tremendous success with Associateships...
</li>
</a>
</ul>
And here's the CSS
.qualities_cycle {
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
.qualities_cycle li {
padding:0;
background:none;
border:none;
line-height:22px;
}
.qualities_cycle li .title-wrap {
position:relative;
padding:0 90px 0 60px;
}
.qualities_cycle li .icon {
position:absolute;
left:0;
top:0;
}
.qualities_cycle li .title-wrap h3 {
font-weight:normal;
}
.qualities_cycle li .title-wrap h3 a {
color:#0f0f0f;
text-decoration:none;
}
.qualities_cycle li .title-wrap h3 a:hover {
color:#80B34C;
}
.grid_4 {
display:inline;
float: left;
position: relative;
padding: 19px 9px !important;
}
a.cyclehover {
color:#0F0F0F;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}
a.cyclehover:hover {
color: #4C739B;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon2.gif") no-repeat scroll 0 0 transparent;
}
a jsfiddle link is here
I'm trying to get three columns in and this is what I have, but the images aren't showing up:
Just change CSS related to a.cyclehover
a.cyclehover {
color: #0F0F0F;
background-image: url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif");
display: block;
float: left;
background-repeat: repeat;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
transition: color .2s ease-out, background 1s ease-in;
}
After a quick glance, I've spotted these problems in your page:
You're using the background-image CSS property as if it was background.
Inside the <div> contained in the <a> you have floating elements, which are considered to be outside of the normal element flow in your page, so your <div> ends up having a null height: you can "fix" this by adding the overflow: hidden; style to the <div>.
You should not put block elements (such as <div>) inside an <a> at all, that's not valid HTML.
You're trying to apply a CSS transition to the background property, but background is not animatable: http://www.w3.org/TR/css3-transitions/#animatable-properties
In short: rewrite the page, follow some good documentation and use the W3C Markup Validator.
I didn't take a deep look into your code but you're using the background property the wrong way.
Basically, change this:
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
to this:
background:url(http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif) no-repeat 0 0;
Check if it works... if so, you can add the "scroll" property if it's really necessary. I don't even know what that "transparent" thing is... backgrounds are transparent by default so it shouldn't be necessary. If you need to apply another background-color, do so before the url()...
Btw, this is how you should 'think' background shorthands in CSS (at least is how I use them):
background: color url() repeat fixed left top;
so:
background: #000 url(imgs/logo.png) no-repeat scroll 0 0;
In the example, instead of the #000 color, you could use transparent, but again, it's the default. But use it if you have another rule setting a color and you want it to be transparent.
Also remember that backgrounds can only be applied to "block" elements. If your element is not a block element, set it to, for ex.: display: block; or display: inline-block; set a width and a height to it and you should be good to go.
I searched the web and stackoverflow for this problem, but I didn't seem to find a solution for my problem. I try to make it so when you hover on a list item, there will appear a bottom-border from 0 to 100% opacity. But when I load/reload the page there appears a border under my list item and is removed instantly. Here are a few images to illustrate what I mean:
1) loading/reloading the page (border shown)
2) The border dissapears (it should actually start like this!)
3) When hovered (after the transition is complete)
4) Here is a link to the website I'm currently working on. Chrome version: 22.0.1229.94
Here the html and css I use:
A) HTML
<ul id="menu">
<li>home</li>
<li>contact</li>
<li>find me</li>
<li>downloads</li>
</ul>
B) CSS
#menu li+li:before
{
content: '//';
color:#e27c18;
font-size:1.2em;
margin-right:10px;
}
#menu li a
{
border-bottom:1px solid rgba(226, 124, 24, 0);
-webkit-transition:border-bottom-color 300ms ease-in 200ms;
-moz-transition:border-bottom-color 300ms ease-in 200ms;
-o-transition:border-bottom-color 300ms ease-in 200ms;
transition:border-bottom-color 300ms ease-in 200ms;
}
#menu li a:hover
{
border-bottom:1px solid #e27c18;
border-bottom:1px solid rgba(226, 124, 24, 1);
-webkit-transition:border-bottom 300ms ease-in 200ms;
-moz-transition:border-bottom 300ms ease-in 200ms;
-o-transition:border-bottom 300ms ease-in 200ms;
transition:border-bottom 300ms ease-in 200ms;
}
Now the thing I want is that when you reload or load the page, that there is not a visible border with correct transitions (this is the only way the transitions react correctly).
EDIT: I noticed that only a few people have this problem, wich makes it a lot harder to fix this bug :/.
I'm trying to understand the simplest background transition possible using only HTML5 and CSS3. Searching through stackoverflow I've learned it can be easily implemented using external libraries such as jQuery but for this project I've decided not relying on any of those.
Markup
<nav>
<ul>
<li><a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a></li>
</ul>
</nav>
Styles
body {
background: url('background-default.png'), no-repeat;
}
#foobar a:hover {
background: url('background-hover.png'), no-repeat;
-webkit-transition: // TODO;
-moz-transition: // TODO;
-o-transition: // TODO;
-ms-transition: // TODO;
transition: // TODO;
}
As I mentioned in my comment, you can't transition the background-image property but you can get the sort of effect you're looking for if you're willing to add extra markup and then transition the opacity. So you'll have some markup like this:
<nav>
<ul>
<li>
<img src="no-icon.png">
<img src="yes-icon.png">
<a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a>
</li>
</ul>
</nav>
Then set the transition on the images, absolute position them (so they'll be like backgrounds), and hide one of them by default (I've left out the vendor extensions for clarity):
nav li img {
position: absolute;
transition-duration: 1.5s;
opacity: 1;
}
nav li img:first-child {
opacity: 0;
}
Then swap the opacity values on li:hover:
nav li:hover img {
opacity: 0;
}
nav li:hover img:first-child {
opacity: 1;
}
Here's a full working example. Not an ideal solution because you have to add extra markup, but it'll work.
Here's an example of the code I use to achieve this. The images are sprites which each contain normal and hover state. The trick is to add the img to both li and a, and to use opacity to change the appearance of the image. You can then use css3 transitions to make this appear smoother.
<ul id="homenav">
<li class="h"><a href="#><span>Home</span></a></li>
<li class="i"><span>Inloggen</span></li>
<li class="v"><span>Voorbeelden</span></li>
</ul>
#homenav li.h, #homenav li.h a {background-image: url('img/btn_home.gif');}
#homenav li.i, #homenav li.i a {background-image: url('img/btn_inloggen.gif');}
#homenav li.v, #homenav li.v a {background-image: url('img/btn_voorbeelden.jpg');}
#homenav li {background-position: 0 170px;}
#homenav li a {background-position: 0 0;}
#homenav li a:hover
{opacity: 0;
-webkit-transition: opacity .8s ease-in;
-moz-transition: opacity .8s ease-in;
-o-transition: opacity .8s ease-in;
transition: opacity .8s ease-in;}
#homenav a {display: block; height: 100%;}
#homenav a span {display: none;}