以下のベガによって解決されました。ここに作業フィドルがあります。将来の訪問者がこの問題がどのように解決されたかを確認できるように、投稿全体を保持しています.
ホバーすると、下の引き出しに関する情報が表示されるボタンを作成しようとしています。
簡単にページに実装できるようにしたかったので、jQuery ウィジェットに変えました。ボタンやドロワーの内容に合わせて調整したいのですが、今のところそれができていません。ユーザーは、非表示のデータを含む単一の HTML div タグを配置できる必要があり、それは機能します。
理想的には、ボタン/引き出しの幅を 2 つの間の最大値に調整して、閉じた状態で引き出しが完全に隠れるようにします。ユーザーが固定幅の設定をいじる必要がないようにしたいだけです。
私は助けが必要です!
これは次のようになります。
関連する HTML (完全な HTML in Fiddle ):
<div class="download" data-value="It's awesome!">Visit Website</div>
関連する CSS (完全な CSS in Fiddle ):
.button {
position:absolute;
padding:10px;
}
.drawer {
box-sizing:border-box;
z-index:-1;
position:absolute;
top:3px;
left:3px;
padding:6px 10px;
text-align:center;
-webkit-transition:0.3s left ease-in;
}
関連する jQuery (完全な jQuery in Fiddle ):
$(function() {
$(".button").each(function() {
$(this).append("<div class='drawer'>" + $(this).data('value') + "<div class='handle'>||</div></div>");
$(".drawer", this).css("width", $(".button").width());
});
$(".button").mouseenter(function() {
$(".drawer", this).css("left", $(".button").outerWidth());
}).mouseleave(function() {
$(".drawer", this).css("left", "3px");
});
});