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:

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



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%)
----- 

[HTML] pobierz, plaintext 
  1. #kwadrat:hover #pole {background-color: silver}
[HTML] pobierz, plaintext
?
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()"/>
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ę:
[CSS] pobierz, plaintext 
  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>
[CSS] pobierz, plaintext


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ę (IMG:style_emoticons/default/wink.gif)
Pozdrawiam
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 17:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn