Ich möchte einen Rahmen um ein Element erstellen, sobald sich die Maus darüber befindet. Ich versuche zu verwenden:
%Vor%Aber was passiert, wird wegen der angrenzenden DOM-Elemente in der Nähe gestört . Also, was ich denke ist, um eine transparente DIV um dieses Element zu erstellen und auf Maus aus diesem transparenten Div entfernen.
Bitte helfen Sie mir bei dieser Idee. Ich bin nicht in der Lage, das herauszufinden. Wie geht das?
Wie die anderen Antworten nahelegen, können Sie dies mit CSS tun.
Aber was passiert, aufgrund der Grenze, nähert sich DOM Elemente Position gestört. Also, was ich denke ist, ein transparentes DIV zu erstellen um dieses Element herum. und auf der Maus raus. entferne das.
In diesem Fall klingt es so, als ob Sie mit Umrisse werden "über" dem Element gezeichnet, so dass die Positionen anderer Elemente nicht gestört werden. outline anstelle von border .
Dies ist kein JavaScript / jQuery-Problem! Verwenden Sie stattdessen CSS!
%Vor%Um den Effekt der Störung benachbarter Elemente aufzuheben, verwenden Sie im Normalzustand einen transparenten Rahmen.
%Vor%Verwenden Sie dazu einfach CSS, Beispiel:
%Vor%Demo: Ссылка
AKTUALISIEREN
Beachten Sie, @ thirthydots Antwort wäre der bevorzugte Weg, aber IE7 unterstützt es nicht (IE6 Support niether denke ich). Dann noch einmal: Es liegt an Ihnen, ob Sie IE7 unterstützen möchten.
In diesem Fall würden Sie tun:
%Vor%Sie müssen einen weißen / transparenten Rahmen haben, der der Breite des Rahmens entspricht, der beim Schweben angezeigt wird.
%Vor% Wenn Sie wirklich JS / jQuery verwenden möchten, sollten Sie den Handler mouseover (d. h.) an die divs statt an den body binden (wodurch Sie die schmerzhafte Kontexteinstellung speichern). Wie:
Siehe diese Geige .
Aber das könnte auch in einfachem CSS gemacht werden (was viel besser und einfacher ist):
%Vor%Siehe eine andere Geige
Wenn die Verwendung von border Ihr Layout jumpy macht (da der Rahmen die Elementdimensionen erweitert), können Sie stattdessen outline verwenden (schamlos aus @ thirthydots Antwort gestohlen).
Ich denke box-sizing: border-radius sollte hier erwähnt werden, auch wenn es eine ziemlich alte Frage ist.
Wenn Sie verwendetes CSS hinzugefügt und box-sizing: border-box auf das Element angewendet haben, wird die Position in der Nähe von DOM-Elementen nicht gestört. Warum? Weil box-sizing: border-box den Rahmen und das Padding als Teil der Breite enthält.
Sie könnten auch box-sizing: border-radius in Ihrem Beispiel verwenden und alles ist behoben!
Tags und Links javascript html jquery css