1

左下隅にメニューがあり、色、行の高さ、文字の間隔、テキストの影など、この特定の div 内の a:link と a:hover の間にいくつかの CSS3 トランジションがあります。また、div 全体の行の高さに影響を与える div.floating-menu と div.floating-menu の間のトランジションもあり、このフローティング メニューをページの下部に事実上折りたたむことができます。

この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;
}
4

2 に答える 2

0

(CSS のみの修正)およびopacity:0;に追加div.floating-menu a:link, div.floating-menu a:visitedopacity: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;
}
于 2013-10-05T14:13:26.833 に答える