Mam problem z funkcją CSS jQuery.

$('.myClass').mouseover(function() {
                  $(this).css( {borderLeft: '6px solid green'});

              });

Działa, brzegowa pojawia się na elemencie. Problem polega na przeniesieniu elementu (6px w lewo)

Próbowałem :

$('.myClass').mouseover(function() {
                  $(this).css( {borderLeft: '6px solid green', margin: '-6px' });

              });

Element wciąż się porusza, próbowałem również:

$('.myClass').mouseover(function() {

                  $(this).css( {borderLeft: '6px solid green', marginLeft: '-6px' });

              });

Taki sam problem.

Jak mogę spawnować granicę na moim elemencie, nie poruszając czegokolwiek?

Dzięki

0
Anyone_ph 17 sierpień 2014, 18:37

5 odpowiedzi

Najlepsza odpowiedź

Innym sposobem jest używanie przejrzystej granicy, a możesz to zrobić bez JavaScript, tylko CSS:

.myClass { border-left: 6px solid transparent; }
.myClass:hover { border-left: 6px solid green; }

Updatek: Oto jest przykładem

0
Алексей Овчинников 17 sierpień 2014, 14:43

Granice zazwyczaj dodaje się do wymiaru elementu, więc popycha swój element więcej na prawo. Powinieneś dodać box-sizing: border-box.

.myClass{
    box-sizing: border-box; 
}

Powodem, dla którego będzie działać, zgodnie z Box- rozmiar dokumentacji mdn , ustawienie {x1}} do border-box Powoduje właściwości width i {x3}}, aby uwzględnić padding i {{x5 }}.


demo - przy użyciu border-box


3
Nope 17 sierpień 2014, 16:05

W CSS, zdefiniuj granicę 6px dla elementu, a na unosi się właśnie zmienić kolor granicy elementu, który w tym przypadku wygląda na to, że stosujesz granicę na HOVER.

.myClass{
    border: 6px solid [colorOftheBackground]; 
}

Z drugiej strony możesz po prostu zrobić bez jQuery.

.myClass{
    border: 6px solid [colorOftheBackground]; 
}

.myClass:hover{
    border-color: green; 
}
1
Zafar 17 sierpień 2014, 14:41

Dodaj margines w lewo bezpośrednio w CSS.

.myClass { margin-left: 6px; }

Następnie usuń go w jQuery.

$('.myClass').mouseover(function() {
$(this).css( {borderLeft: '6px solid green', marginLeft: 0' });
});

Możesz sprawdzić go na jdfiiddle.

-1
Alex 17 sierpień 2014, 14:45

Zdarzyło się, ponieważ twój domyślny element nie ma obramowania. Umieść obramowanie w swoich CSS za pomocą tego koloru tła.

W takim razie

$('.myClass').css( {borderLeft: '6px solid default-color'});

Lub w CSS.

    .myClass{
       border: 6px solid [colorOftheBackground]; 
     }
-1
marc_s 1 maj 2016, 18:54