我左下角有一个菜单,我在a:link和a之间有几个CSS3过渡:在这个特定div中悬停,包括颜色,行高,字母间距和文本阴影。我在div.floating-menu和div.floating-menu之间也有一个过渡,它影响整个div的行高,有效地将这个浮动菜单折叠到页面底部。
我在这个div中只有链接和h1。
我想要折叠菜单并且链接是透明的(黑色也可以),然后将鼠标悬停在div上并使链接转换为不透明(或返回白色)。
当菜单崩溃时,我似乎无法获得消失的链接。有没有办法做到这一点?
以下是菜单的HTML和CSS:
<div class="floating-menu">
<br /><br />
<a href="#">index</a>
<a href="#">search</a>
<a href="#">help</a>
<a href="#">members</a>
<a href="#">calendar</a>
<br />
<h1>menu</h1>
<br/>
</div>
的CSS:
div.floating-menu {
position: fixed;
bottom: 10px;
left: 10px;
width: 120px;
z-index: 100;
padding-left: 10px;
line-height: 0px;
transition: all 1s;
opacity: 1;
}
div.floating-menu:hover {
line-height: 9px;
opacity: 1;
}
div.floating-menu a, div.floating-menu h1 {
display: block;
margin: 0 0.5em;
}
div.floating-menu a:link, div.floating-menu a:visited {
color: #888888;
letter-spacing: -1px;
transition: all 1s;
text-shadow: 0 0 2px #cccccc;
opacity: 1;
}
div.floating-menu a:hover {
letter-spacing: 1px;
color: #ffffff;
color: #cccccc;
text-shadow: 0 0 2px #ffffff;
line-height: 13px;
}
div.floating-menu h1 {
color: #000000;
text-shadow: 0 0 25px #ffffff;
opacity: 1;
align: left;
}
答案 0 :(得分:1)
这是jquery解决方案和工作演示 - &gt;的 DEMO 强>
$('.floating-menu').mouseover(function() {
$('.floating-menu a').css("display","block");
});
$('.floating-menu').mouseleave(function() {
$('.floating-menu a').css("display","none");
});
答案 1 :(得分:0)
(仅限CSS)将opacity:0;
添加到div.floating-menu a:link, div.floating-menu a:visited
,将opacity:1;
添加到div.floating-menu:hover a:link, div.floating-menu a:visited
div.floating-menu {
position: fixed;
bottom: 10px;
left: 10px;
width: 120px;
z-index: 100;
padding-left: 10px;
line-height: 0px;
transition: all 1s;
opacity: 1;
}
div.floating-menu:hover {
line-height: 9px;
opacity: 1;
}
div.floating-menu a, div.floating-menu h1 {
display: block;
margin: 0 0.5em;
}
/*ADDED A '0 OPACITY'*/
div.floating-menu a:link, div.floating-menu a:visited {
color: #888888;
letter-spacing: -1px;
transition: all 1s;
text-shadow: 0 0 2px #cccccc;
opacity: 0;
}
/*ADDED A '1 OPACITY' ON MENU HOVER*/
div.floating-menu:hover a:link, div.floating-menu a:visited {
opacity:1;
}
div.floating-menu a:hover {
letter-spacing: 1px;
color: #ffffff;
color: #cccccc;
text-shadow: 0 0 2px #ffffff;
line-height: 13px;
}
div.floating-menu h1 {
color: #000000;
text-shadow: 0 0 25px #ffffff;
opacity: 1;
align: left;
}