Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ukryj/Pokaż element gdy onmouseover
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
zielonykwas
Po kliknięciu myszką div z widoczną zawartością znika, a pojawia się div, który chcemy zobaczyć.
Chciałbym uzyskać ten sam efekt, lecz zamiast klikania myszką, żeby wystarczyło najechać (onmouseover).

java script:
  1. function pokaz3(pokaz, ukryj, ukryj2) {
  2.  
  3. document.getElementById(pokaz).style.display = "block";
  4. document.getElementById(ukryj).style.display = "none";
  5. document.getElementById(ukryj2).style.display = "none";
  6.  
  7.  
  8. }


html
  1. <div id="tytul_opcja_div">
  2.  
  3. <a class="tytul_opcja" onmousover="java script:void(pokaz3('sport_zuzel', 'sport_pilkanozna', 'sport_inne')); ">Zuzel</a>
  4.  
  5. <a class="tytul_opcja" href="java script:void(pokaz3('sport_pilkanozna', 'sport_zuzel', 'sport_inne')); ">Pilka nozna</a>
  6.  
  7. <a class="tytul_opcja" href="java script:void(pokaz3('sport_inne', 'sport_pilkanozna', 'sport_zuzel')); ">Inne</a>
  8.  
  9. </div>
  10.  
  11.  
  12. <div id="sport_pilkanozna" style="display: none;">
  13.  
  14. <h2>Piłka nożna</h2>
  15.  
  16. Coś tam coś tam
  17.  
  18. </div>
  19.  
  20.  
  21. <div id="sport_zuzel" style="display: none;">
  22.  
  23. <h2>Żużel</h2>
  24.  
  25. coś tam coś tam
  26.  
  27. </div>
  28.  
  29.  
  30. <div id="sport_inne">
  31.  
  32. <h2>Inne</h2>
  33.  
  34. coś tam coś tam
  35.  
  36. </div>
  37.  
  38. </div>
Wicepsik
Przed założeniem tematu sprawdzaj zawsze literówki
onmousover != onmouseover
zielonykwas
Dzięki za zwrócenie uwagi.
Pomoc już nie potrzebna bo okazało się to banalne. Nie wiem czemu na to wcześniej nie wpadłem. Pewnie wydawało się zbyt proste.
Teraz jeszcze jakąś pętle do tego skonstruować (do ukrywania większej ilości elementów) i będzie dobrze.

Zrobiłem to tak: (może się komuś przyda)
  1. document.getElementById('inne').onmouseover = function newa() { document.getElementById('sport_inne').style.display="none";
  2. document.getElementById('sport_pilkanozna').style.display="block";
  3. document.getElementById('sport_zuzel').style.display="block"; }


(wcześniej dodałem id do linków)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.