Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQUERY] zmiana css
Forum PHP.pl > Forum > Po stronie przeglądarki
shpaque
Witam, chciałbym aby to zadziałało:

  1. <a href='./agencja.php'><div id="poznaj" style="position:absolute;text-align:center;" title="" class="poznaj">
  2. <div id="poznaj_Container" style="width:1100px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
  3. <table style="position:absolute;left:150px;top:64px;width:800px;height:30px;z-index:2;" id="slogan">
  4. <tr>
  5. <td style="background-color:transparent;text-align:center;vertical-align:middle;height:30px;"><div class="text" style="line-height:15px;"><h5>S T R A T E G I A&nbsp;&nbsp; +&nbsp;&nbsp; T E C H N O L O G I A&nbsp;&nbsp; +&nbsp;&nbsp; K R E A T Y W N O Ś Ć</h5></div></td>
  6. </tr>
  7. </table>
  8. </div>
  9. </div><script type="text/javascript">
  10. $(document).ready(function()
  11. {
  12. $('.poznaj').hover(function()
  13. {
  14. $('.text').css({"color": "#FFFFFF"});
  15. $('.text').css({"-webkit-transition": "color 500ms linear 0ms"});
  16. $('.text').css({"-moz-transition": "color 500ms linear 0ms"});
  17. $('.text').css({"-ms-transition": "color 500ms linear 0ms"});
  18. $('.text').css({"transition": "color 500ms linear 0ms"});
  19. },
  20. function()
  21. {
  22. $('.text').css({"color": "#787878"});
  23. $('.text').css({"-webkit-transition": "color 1000ms linear 0ms"});
  24. $('.text').css({"-moz-transition": "color 1000ms linear 0ms"});
  25. $('.text').css({"-ms-transition": "color 1000ms linear 0ms"});
  26. $('.text').css({"transition": "color 1000ms linear 0ms"});
  27. });
  28. });
  29. </script>
  30. </a>


czyli żeby po najechaniu na klasę "poznaj" zmienił się kolor tekstu w tabelce w komórce "text"


2 rzecz - jak zrobić żeby również zmieniła się treść?
PrinceOfPersia
1. wywal jQuery.
2. przenieś wszystkie deklaracje stylów (zarówno te z HTMLa jak i te, które aktywujesz za pomocą jQuery, nie wiem po co) do pliku *.css
3. dołącz CSS wg tego schematu
Kod
<link href="NAZWA_PLIKU.css" rel="stylesheet" type="text/css" >


dopiero potem można coś powiedzieć na ten temat, jak masz pierdolnik w kodzie za przeproszeniem, to nie oczekuj, że ci cokolwiek zadziała...
shpaque
no dzięki, ale nie zmienia to faktu że nie działą...
PrinceOfPersia
A uporządkowałeś to? To wrzuć uporządkowany kod, najlepiej od razu na jsfiddle.net.
shpaque
oj to tak szybko chciałem dać przykład... Mniejsza z tym - podświetlenie już chodzi, teraz jak zrobić w CSS, żeby po hover zmieniła się treśc klasy ".text"

  1. <a href='./agencja.php'><div id="poznaj" style="position:absolute;text-align:center;" title="" class="poznaj">
  2. <div id="poznaj_Container" style="width:1100px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
  3. <table style="position:absolute;left:150px;top:64px;width:800px;height:30px;z-index:1;" id="slogan">
  4. <tr>
  5. <td style="background-color:transparent;text-align:center;vertical-align:middle;height:30px;"><h5><div class="text" style="line-height:15px;letter-spacing:4px;">STRATEGIA + TECHNOLOGIA + KREATYWNOŚĆ</div></h5></td>
  6. </tr>
  7. </table>
  8. </div>
  9. </div><script type="text/javascript">
  10. $(document).ready(function()
  11. {
  12. $('.poznaj').hover(function()
  13. {
  14. $('.text').css({"color": "#FFFFFF"});
  15. },
  16. function()
  17. {
  18. $('.text').css({"color": "#787878"});
  19. });
  20. });
  21. </script>
  22. </a>
trueblue
  1. $('.text').text('blabla');
shpaque
dzięki wielkie - i można? można, a nie jak czytałem gdzieś indziej "nie da się w css, trzeba w JS"... Mam już dosyć "onmouseover" i tak dalej... smile.gif
trueblue
Ale to jest w JS...
shpaque
oj chodziło mi o jquery no... Literówka...
com
JQuery to jest nadal JS
A w css, mogłeś zrobić tak
  1. .text:hover:after{
  2. content: "cokolwiek";
  3. }


Da się, da się tongue.gif
PrinceOfPersia
zacząłbym od solidnego opanowania podstaw (skoro ktoś nie wie, czym się różni CSS od jQuery, to chyba nie jest zbyt dobrze...), a później brał się za tworzenie stron... facepalmxd.gif
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.