/ / Vytvorenie panela s nástrojmi, keď sa myš vznáša - jquery

Vytvorí sa panel nástrojov, keď sa na ňom pohybuje myš - jquery

Mám nasledovné:

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:

tu zadajte popis obrázku

Panel s nástrojmi by sa mal objaviť, keď používateľ umiestni myš na panel s nástrojmi (používam on pretože .fullscreen .fixed-toolbar sa pridávajú dynamicky pomocou jQuery). Ale keď tak urobím, nič sa nestane.

Čo robím zle?

EDIT:

To isté som vyskúšal v odkaze a spustilo sa to. Existuje iný spôsob, ako to urobiť, keď sa vznášate div?

odpovede:

1 pre odpoveď č. 1

Myslím, že používate on zlým spôsobom.

Vyskúšajte to

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

1 pre odpoveď č. 2

Myslím, že som dostal váš problém:

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

Vyskúšajte to a zistite, či vám pomôže.


0 pre odpoveď č. 3

Toto nebude fungovať, pretože prvok, ktorý má dostať mouseover udalosť je skrytá.

Ak chcete tento problém vyriešiť, pomocou nástroja CSS môžete mať oddiel s priehľadným obsahom.


0 pre odpoveď č. 4

Keď váš on() zadanie sa vyhodnocuje, neexistujú žiadne .fullscreen .fixed-toolbar prvky, takže sa nič nestane. Môžete to skúsiť umiestniť hneď za wrap():

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