0
내 게시물 아래에 버튼이 몇 개 있습니다. 이 버튼 중 하나는 소셜 공유 버튼이며, 마우스로 가리키면 소셜 공유 메뉴가 나타납니다. 문제는 마우스가 기본 공유 버튼에서 벗어나 사라 지므로 메뉴에 도달 할 수 없다는 것입니다. 이 문제를 일으키는 것으로 가정하고 있으므로 30 픽셀의 여백이 있습니다. 그러나 30px의 여백을 원하기 때문에 문제를 해결하는 방법을 모르겠습니다. 누구든지 해결책이 있습니까? 여기 마우스를 클릭하기 전에 마우스를 놓으면 드롭 다운 메뉴가 사라집니다.
거친 바이올린이 (정확히 광산처럼 보이지 않는하지만 당신은 아이디어를 얻을)입니다 -
<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