Skocz do zawartości

Zmiana rozmiaru tekstu po najechaniu kursorem - JS


Rekomendowane odpowiedzi

Witam, tak jak w temacie, chciałbym żeby rozmiar elementu zdefiniowanego jako klasa "naglowek" ( <div class="naglowek">tekst</div>) zwiększył się.

Kiedyś bylem w tym bieglejszy, ale czas zrobił swoje i ciężko mi się w tym odnaleźć ;)

$(document).ready(function () {    $("naglowek").mouseover(function () {        $(this).css("font-size", $(this).css("font-size").replace("px", "") * 2); 

Próbowałem już coś naskrobać i walczyć metodą prób i błędów, ale efekt nie został osiągnięty :/

Myśle, że to jakiś niewielki błąd także prosze o jakies wskazówki

Odnośnik do komentarza

Dołącz do nas za darmo i naucz się zarabiać!

  • Dostęp do darmowych poradników pokazujących krok po kroku jak zarabiać w Internecie
  • Sposoby zarabiania niepublikowane nigdzie indziej
  • Aktywna społeczność, która pomoże Ci rozwiązać problemy i doradzi
  • Profesjonalne treści na temat SEO, social media, afiliacji, kryptowalut, sztucznej inteligencji i wiele więcej!

 

 

$(".naglowek").mouseover(function() {    $(this).css("font-size", "+=2");});

Po 1: odwoływałeś się do znacznika "naglowek", a pewnie chciałeś do klasy. Brakło kropki.

Po 2: koniecznie chcesz pomnażać wielkość x2? Może tylko zwiększać dodając np. 2? Zobacz na moim przykładzie.

 

Przepraszam, że tak późno - dopiero teraz zauważyłem temat. Pewnie już sam wpadłeś na rozwiązanie. ;)

  • Super 1
Odnośnik do komentarza

@bossag, dlaczego koniecznie chcesz to wykonać w JS/jQuery, a nie w CSS? Wystarczy użyć :hover.

.naglowek {   font-size: 10px;}.naglowek:hover {   font-size: 20px;}

Jednak jeśli naprawdę zależy Ci na jQuery, to poniżej zamieszczam kod. Użyłem hover, bo łatwiej jest wrócić do poprzedniego rozmiaru elementu. W mouseover ciągle rozmiar będzie powiększał się dwa razy po każdym najechaniu myszką.

 

$(".naglowek").hover(function() { // wyszukujemy elementy z klasą naglowek   $element = $(this);            // przypisujemy do zmiennej obiekt   $size = $element.css("fontSize").replace("px", ""); // przypisujemy do zmiennej $size podstawowy rozmiar bez "px"   $element.css("fontSize", $size*2 + "px"); // mnożymy rozmiar 2x i dodajemy "px"}, function() {   $element.css("fontSize", $size + "px"); // po opuszczeniu diva rozmiar wraca do podstawowego rozmiaru, czyli przypisujemy $size z "px"});

Może jest jeszcze jakieś łatwiejsze i optymalniejsze rozwiązanie. Nie zapomnij dołączyć biblioteki jQuery do pliku.

 

wiec jak js odwolujesz sie do tego diva jak nie ma id

Oczywiście można się odwołać do wszystkich elementów posiadających daną klasę.

  • Super 1
Odnośnik do komentarza

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Ta strona korzysta z ciasteczek, aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie z witryny oznacza zgodę na ich wykorzystanie. Polityka prywatności .