So erstellen Sie einen Rahmen um das div-Element beim Mouseover

7

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?

    
sachinjain024 13.04.2012, 09:09
quelle

7 Antworten

29

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 outline anstelle von border . %Vor%

Ссылка

Umrisse werden "über" dem Element gezeichnet, so dass die Positionen anderer Elemente nicht gestört werden.

    
thirtydot 13.04.2012, 09:16
quelle
5

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%     
Madara Uchiha 13.04.2012 09:13
quelle
4

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%     
PeeHaa 13.04.2012 09:14
quelle
3

Sie müssen einen weißen / transparenten Rahmen haben, der der Breite des Rahmens entspricht, der beim Schweben angezeigt wird.

%Vor%     
Robin Maben 13.04.2012 09:16
quelle
1

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:

%Vor%

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).

    
m90 13.04.2012 09:18
quelle
1

Dies ist eine einfache Sache, Sie können nur mit CSS tun. Probieren Sie dieses aus

%Vor%     
srini 13.04.2012 09:26
quelle
0

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.

%Vor% %Vor%

Sie könnten auch box-sizing: border-radius in Ihrem Beispiel verwenden und alles ist behoben!

%Vor% %Vor% %Vor%
    
Chris Happy 26.04.2017 22:46
quelle

Tags und Links