0
私のポストの下にいくつかのボタンが表示されています。これらのボタンの1つはソーシャル共有ボタンで、その上にマウスを置くとソーシャルシェアメニューが表示されます。問題は、マウスがメインの共有ボタンから離れたときに消えてしまうため、メニューにアクセスできないことです。私は30pxのマージンを持っているので、これが問題を引き起こしていると仮定しています。しかし、私は30pxのマージンが必要なので、私はそれを修正する方法を知らない。誰にも解決策はありますか？あなたが共有ボタンにカーソルを合わせると鉱山が実際にどのように見えるかhttps://jsfiddle.net/8e3459g6/ホバードロップダウンメニューが表示される前に消えます
- - ここ
はラフフィドル（正確に私のように見えるが、あなたのアイデアを得ることはありません）です
<div class="wrap">
<img class="main-share button" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" />
<div class="share-buttons">
<a href="http://twitter.com/home/?status=Love this post by @ <?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank" title="Tweet this!"><img src="https://www.theclimategroup.org/sites/all/modules/custom/tcg_social_media_icons/icons/black/16x16/twitter.png"></a>
<a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
<img src="http://www.shipwreckmuseum.com/wp-content/themes/shipwreckmuseum/assets/facebook-icon.png" alt="Facebook" />
</a>
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
<img src="https://lh4.googleusercontent.com/-FaD4j4FL1Bc/TuEf9aN1gEI/AAAAAAAABek/kVqztZRwJ1w/s128/Pinterest_Favicon.png" alt="Pinterest" />
</a>
<a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
<img src="http://www.ihatestevensinger.com/osafe_theme/images/user_content/images/icon-heart.png" alt="Heart" />
</a>
</div>
</div>.wrap:hover .share-buttons {
display:block;
position: absolute;
left: 50%;
white-space: nowrap;
margin-left:-34px;
}
.wrap:hover .triangle-share {
display:block;
position: absolute;
white-space: nowrap;
}
.share-buttons {
display: none;
letter-spacing: 15px;
background-color:#efefef;
padding:10px 20px;
margin-top:30px;
}
.main-share-button {
}
.triangle-share {
border-bottom: 12px solid #efefef;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
width: 0;
height: 0;
margin-top:18px;
margin-left:8px;
content: "";
display: none;
}
.wrap {
display: inline-block;
}
あなたのスニペットを編集する際には、含まれているイメージのようには見えず、説明したように機能しません。 – Shaggy
それでも同じ問題があります。共有ボタンの上にカーソルを置くと、メニューが表示されます。しかし、一度あなたのマウスが共有ボタンから離れると、パディングのためにメニューが消えてしまいます。 – user6738171
あなたの** share-buttons ** cssクラスで 'margin-top：-5px;'を試してください – warl0ck