Ich habe ein paar Schaltflächen unter meinen Posts angezeigt. Eine dieser Schaltflächen ist eine Schaltfläche zum Teilen von sozialen Netzwerken, und wenn Sie den Mauszeiger darüber bewegen, wird ein Menü für soziale Netzwerke angezeigt. Das Problem ist, dass ich nicht zum Menü komme, weil es verschwindet, sobald meine Maus von der Hauptfreigabetaste ist. Ich habe eine Marge von 30px, also nehme ich an, dass dies das Problem verursacht. Allerdings weiß ich nicht, wie ich es beheben kann, weil ich diesen Rand von 30px will. Hat jemand irgendwelche Lösungen?Hover Dropdown-Menü verschwindet, bevor ich darauf klicken kann
hier ist eine grobe Geige (nicht genau wie meins sieht aber Sie bekommen die Idee) - https://jsfiddle.net/8e3459g6/
wie meins sieht eigentlich, wenn man über Share-Taste schweben -
<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;
}
Bearbeiten Sie Ihr Snippet, es sieht nicht wie das enthaltene Bild aus, noch funktioniert es wie beschrieben. – Shaggy
Es hat immer noch das gleiche Problem. Wenn Sie den Mauszeiger über die Schaltfläche zum Teilen bewegen, wird das Menü angezeigt. Aber wegen der Auffüllung, sobald sich die Maus vom Share-Button bewegt, verschwindet das Menü. – user6738171
versuchen Sie es mit 'margin-top: -5px;' in Ihren ** share-buttons ** css class – warl0ck