/ /マウスを置いているときにツールバーを表示させる - jquery

マウスがそれをホバリングしているときにツールバーを表示する - jquery

私には次のものがあります:

JS:

$(function() {
$(".fullscreen-toggle").toggle(
function() {
$("body").addClass("fullscreen");
$(".fullscreen-toggle").wrap("<div class="fixed-container fixed-toggle" />");
$(".new_post .wysihtml5-toolbar").wrap("<div class="fixed-container fixed-toolbar" />");
$(".new_post .form-actions").wrap("<div class="fixed-container fixed-submit" />");
$(this).children(".toggle-fullscreen").hide();
$(this).children(".exit-fullscreen").show();
},
function() {
$("body").removeClass("fullscreen");
$(".new_post .fixed-container").remove();
$(this).children(".toggle-fullscreen").show();
$(this).children(".exit-fullscreen").hide();
}
);

// Fade in/out for post fullscreen form
$(".fullscreen .fixed-toolbar").on("mouseover", function(){
$(this).show();
});

HTML:

ここに画像の説明を入力

そのため、ユーザーがツールバーの上にマウスを置くとツールバーが表示されます(私は on なぜなら .fullscreen .fixed-toolbar jQueryで動的に追加されています)。しかし私がそうするとき何も起こらない。

私は何をやっているのですか?

編集:

私はリンクで同じことを試みました、そしてそれは引き起こされました。 divをホバリングしながらそれを行う別の方法はありますか?

回答:

回答№1は1

私はあなたが使っていると思います on 間違った方法で。

一緒に試してみる

$(document).on("mouseover", ".fullscreen .fixed-toolbar", function(){
$(this).show();
});

回答№2の場合は1

私はあなたの問題を抱えていると思います:

$(document).on("mouseover", ".fullscreen .fixed-toolbar", function(){
$("ul[class$="toolbar"]", this).show();
});

これを試して、助けになるかどうかを確認してください。


回答№3の場合は0

これをうまく処理できなかったのは、受け取ったはずの要素が mouseover イベントは非表示です。

これを修正するために、CSSを使用して透明なコンテンツを持つdivを作成できます。


回答№4の場合は0

あなたの on() 代入は評価されない .fullscreen .fixed-toolbar 要素なので、何も起こりません。あなたがしようとするとすぐにそれを配置することができます wrap()

$(".new_post .wysihtml5-toolbar").wrap("<div class="fixed-container fixed-toolbar" />");
$(".fullscreen .fixed-toolbar").on("mouseover", function(){
$(this).show();
});