Wie Rand hinzufügen, aber keine Änderung an der Inhaltsposition

Ich versuche, einen Rahmen zu einem div-Element hinzufügen, wenn der Moust auf dem div schwebt, aber ich finde, nachdem der Rahmen aded ist, nimmt der Boder Platz und Lass den Inhalt bewegen. Sehen Sie sich den Ausschnitt unten an. Ist es möglich, den Inhalt in diesem Fall zu verschieben, wenn der Rahmen angezeigt wird?Wie Rand hinzufügen, aber keine Änderung an der Inhaltsposition

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
       <style type="text/css"> 
       </style> 
       <script type="text/javascript" src="js/jquery.min.js"></script>   
       <script type="text/javascript" src="js/lib.js"></script> 
       <script type="text/javascript"> 
         $(document).ready(function() { 
               $('#test-id').hover(function() { 
                 console.log("test-id"); 
                 $('#test-id').css('border', '5px dotted'); 
                 }, 
                 function() { 
                 $('#test-id').css('border', 'none'); 
                 } 
                 ); 
               }); 

       </script> 
     </head> 
     <body style="margin-bottom:0px;margin-top:0px;"> 
       <div> 
         <div style="width: 300px;">  
         </div> 
         <div id="test-id">    
           jfdjkfjdsfjaldsjfsjf   
         </div> 
       </div> 
     </body> 
</html

Quelle

2010-11-29 Bin Chen

Bin,

Ja Grenze wird auch als Teil der Breite cacluated. Also eine Sache geben Sie eine Grenze vor itselef mit der gleichen Farbe wie Hintergrund, sobald Sie mouseover Sie können die Farbe ändern, so dass es nicht die anderen nach unten drücken.

Quelle

2010-11-29 07:27:39 kobe

Dies ist das Verhalten, wie die CSS machen.

Sie müssen den Rand einstellen, um dies zu verhindern.

Quelle

2010-11-29 07:27:01 WaiLam

@ Wai, negative Marge ist kein schöner Ansatz, alle Zeiten zu verwenden, es sei denn, es ist sehr necessaary ist, IE Döns Funktioniert nicht mit negativen Margen. – kobe

Ja, aber eine gute/schnelle Lösung für den normalen Gebrauch. – WaiLam

yeah .. als eine schnelle Lösung können wir diesen Ansatz verwenden. – kobe

Verwenden Sie die CSS-Umrisseigenschaft anstelle von Rahmen. Der wird keinen Elementplatz einnehmen. Hoffnung wird dir helfen.

Quelle

2010-11-29 07:27:29 jaxb

@jp Outline funktioniert nicht in IE. – kobe

Versuchen Sie, die Grenze die ganze Zeit zu halten, und ändern Sie einfach die Farbe von transparent zu welcher Farbe Sie es haben möchten, wenn es sichtbar ist. Sie könnten auch die Hintergrundfarbe als "Aus" -Farbe verwenden, aber das bedeutet, dass sie ein durchgehend gefärbtes Element überlagern muss.

Quelle

2010-11-29 07:27:46 prodigitalson

1 Lösung ist, dass Sie die mit: auf Schwebeflug -2px oder eine andere im normalen Zustand, mit der Rahmenfarbe auf der Box Farbe (oder Hintergrundfarbe des Körpers) gesetzt.

ex 1:

<body> 
<div class="container"></div> 
</body> 

body { background: #ccc; } 
.container { width: 200px; height: 200px; background: #fff; } 
.container:hover { width: 198px; border: 1px solid #000; }

ex 2: (beste Lösung)

<body> 
<div class="container"></div> 
</body> 

body { background: #ccc; } 
.container { width: 200px; height: 200px; background: #fff; border: 1px solid #fff; } // or #ccc 
.container:hover { border: 1px solid #000; }

Quelle

2010-11-29 07:29:14

Wie Rand hinzufügen, aber keine Änderung an der Inhaltsposition

Antwort

Verwandte Themen