css - 如何转换 :links based on parent div :hover

Question

我在左下角有一个菜单，在这个特定的 div 中，我在 a:link 和 a:hover 之间有几个 CSS3 转换，包括颜色、行高、字母间距和文本阴影。我还在 div.floating-menu 和 div.floating-menu 之间进行转换，这会影响整个 div 的行高，有效地将此 float 菜单折叠到页面底部。

我在这个 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;
}

Answer 1

这是 jquery 解决方案和工作演示 -> DEMO

$('.floating-menu').mouseover(function() {
  $('.floating-menu a').css("display","block");
 });


$('.floating-menu').mouseleave(function() {
  $('.floating-menu a').css("display","none");
});