Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]A'la if zmieniający kolor diva po określonej czynności
JustHuman4
post
Post #1





Grupa: Zarejestrowani
Postów: 63
Pomógł: 2
Dołączył: 10.12.2011
Skąd: Stumilowy Las

Ostrzeżenie: (0%)
-----


Witam. Oto kod stronki:

  1. <title>bleble</title>
  2.  
  3. <style type="text/css">
  4. #pole{
  5. width: 1000px;
  6. height: 1500px;
  7. background: lime;
  8. margin: auto;
  9. -webkit-transition: all 1s linear;
  10. }
  11.  
  12. #kwadrat{
  13. width: 500px;
  14. height: 500px;
  15. background: green;
  16. margin: auto;
  17. -webkit-transition: all 1s linear;
  18. }
  19.  
  20. #kwadrat:hover{
  21. background: greenyellow;
  22. }
  23.  
  24. #pole:hover{
  25. background: gray;
  26. }
  27.  
  28.  
  29.  
  30. </style>
  31.  
  32. </head>
  33. <div id="pole">
  34. <div id="kwadrat">
  35. </div>
  36. </div>
  37.  
  38. </body>
  39. </html>



Chcę zrobić aby div "pole" zmienił kolor na szary dopiero po najechaniu na div "kwadrat".
Pozdrawiam

Ten post edytował JustHuman4 2.03.2012, 19:15:16
Go to the top of the page
+Quote Post
gothye
post
Post #2





Grupa: Zarejestrowani
Postów: 702
Pomógł: 65
Dołączył: 16.03.2009

Ostrzeżenie: (0%)
-----


  1. #kwadrat:hover #pole {background-color: silver}
?


--------------------
Nie udzielam pomocy poprzez PW
Go to the top of the page
+Quote Post
JustHuman4
post
Post #3





Grupa: Zarejestrowani
Postów: 63
Pomógł: 2
Dołączył: 10.12.2011
Skąd: Stumilowy Las

Ostrzeżenie: (0%)
-----


Taa fajnie by było gdyby to było takie proste... Przecież to nie działa :/
Go to the top of the page
+Quote Post
Orzeszekk
post
Post #4





Grupa: Zarejestrowani
Postów: 260
Pomógł: 14
Dołączył: 8.09.2011

Ostrzeżenie: (0%)
-----


bez javascriptu sie nie obejdziesz.przykład w JQuery, bo zapomnialem juz jak pisze sie w normalnym javascripcie.

<script type="text/javascript">
function swapColors()
{
$(".pole").css("background-color", "gray");
}
</script>

<div id="kwadrat" onmouseover="swapColors()"/>


--------------------
"The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time."
Tom Cargill, Bell Labs
Go to the top of the page
+Quote Post
viking
post
Post #5





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


To co tu chciałeś zrobić za pomocą CSS niestety nie jest zaimplementowane w browserach (odwrotne poruszanie się po drzewie DOM). Tłumaczą się tym, że zabiłoby to wydajność. Jeśli nie chcesz całego jQuery to w Mootools jest biblioteka do tego https://github.com/mootools/slick albo http://mootools.net/docs/core/Slick/Slick


--------------------
Go to the top of the page
+Quote Post
by_ikar
post
Post #6





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----


Znaczy się działa taki hover, ale działa tylko dla elementów dzieci. Nie działa dla elementów spoza rodzica do którego jest przypisane hover. Więc zadziałało by to odwrotnie. W momencie kiedy najedziesz na "pole", to możesz zrobić coś z "kwadrat". Inaczej w css się nie da..
Go to the top of the page
+Quote Post
kamil4u
post
Post #7





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----


Jak zmienisz trochę HTML to da radę:
  1. <html>
  2. <head>
  3. <title>bleble</title>
  4.  
  5. <style type="text/css">
  6. #pole{
  7. position: relative;
  8. width: 1000px;
  9. height: 1500px;
  10. background: lime;
  11. margin: auto;
  12. top: -500px;
  13. z-index: 10;
  14. }
  15.  
  16. #kwadrat{
  17. width: 500px;
  18. height: 500px;
  19. background: green;
  20. margin: auto;
  21. position: relative;
  22. z-index: 20;
  23. }
  24.  
  25. #kwadrat:hover{
  26. background: greenyellow;
  27. }
  28.  
  29. #kwadrat:hover + #pole{
  30. background: gray;
  31. }
  32.  
  33.  
  34.  
  35. </style>
  36.  
  37. </head>
  38. <body>
  39.  
  40. <div id="kwadrat"></div>
  41. <div id="pole"></div>
  42.  
  43. </body>
  44. </html>


A jak nie możesz to właśnie JS:
Kod
function swapColors()
{
document.getElementById('pole').style.backgroundColor = "gray";
}


--------------------
Go to the top of the page
+Quote Post
JustHuman4
post
Post #8





Grupa: Zarejestrowani
Postów: 63
Pomógł: 2
Dołączył: 10.12.2011
Skąd: Stumilowy Las

Ostrzeżenie: (0%)
-----


Ślicznie dziękuję wink.gif
Pozdrawiam
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 19.08.2025 - 17:12