我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.
目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none到display: block(或任意组合).
当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"？
我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.
我也尝试过使用身高,但这只是失败了.
我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.
所有和任何建议最受欢迎.
我正在研究一个图像推子.我有它,以便它淡化图像选择的图像(或在这种情况下div与背景颜色)getElementById,但我想知道如何修改JavaScript代码以选择所有div元素并逐个淡出,一个接一个.
var c = document.getElementById("one");
function fade(){
if (!c.style.opacity){
c.style.opacity = 1;
};
var interval = setInterval (fadeout, 200);
function fadeout(){
c.style.opacity -= .05;
if (c.style.opacity <= 0){
clearInterval(interval);
};
};
};
fade();#container{
position: relative;
margin: 0 auto;
text-align: center;
width: 350px;
height: 350px;
background-color: rgb(200,200,200);
}
.inner{
position: absolute;
margin: 0 auto;
left: 25px;
top: 25px;
width: 300px;
height: 300px;
}
#one{
background-color: rgb(100,100,100);
}
#two{
background-color: rgb(0,160,230);
}
#three {
background-color: rgb(0,255,130);
}
#four{
background-color: …