0
ナビゲーションメニューに問題があります。私はボタンの外にホバリングするときに表示されるメニューを停止しようとしています。スニペットでわかるように、カーソルをボタンの左に動かすと、達成したいボタンの上にカーソルがあるときにメニューを表示するのではなく、メニューが表示されます。メニューの外にマウスを移動するとメニューが表示されます
お手数をおかけします。ここで
は抜粋です：
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 18px 2px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
left: 14;
bottom: 0;
font-family: 'Source Sans Pro', sans-serif;
opacity: .4;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
text-align: center;
text-decoration: none;
position: absolute;
left: 59px;
bottom: -300px;
font-family: 'Source Sans Pro', sans-serif;
}
.menu a {
display: block;
color: white;
text-align: center;
padding: 8px 13px;
text-decoration: none;
font-family:'Source Sans Pro', sans-serif;
position:sticky;
}
.menu a:hover {
background-color: #732878;
}
.menu > ul {
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.menu p {
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
border-top: 1px solid #eee;
}
#btn-holder > .button:hover + .menu {
opacity: .8;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: .8;
}<div id="btn-holder">
<div class="button">
<img class="menu" src="http://static.tumblr.com/e2rgcy1/WhRod5hpn/open.png"></a>
</div>
<div class="menu">
<ul>
<li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
<li><a href="/games"onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li>
<li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
<li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
<li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
<li><a href="/"><img class="tc" src="https://secure.static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
<li><a href="/"><img class="refresh" src="https://secure.static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></a></li>
</ul>
</div>
</div>
がちょうど '可視性を追加します：隠された;'あなた '.menu'クラスにして、視認性'へホバー変更、それを上：目に見える; ' – Smile0ff