Forum PHP.pl > [CSS]A'la if zmieniający kolor diva po określonej czynności

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]A'la if zmieniający kolor diva po określonej czynności

JustHuman4

2.03.2012, 19:11:57

Witam. Oto kod stronki:

[HTML] pobierz, plaintext 
<html>
<head>
  <title>bleble</title>
 
  <style type="text/css">
  #pole{
	width: 1000px;
	height: 1500px;
	background: lime;
	margin: auto;
	-webkit-transition: all 1s linear;
}
 
 #kwadrat{
	width: 500px;
	height: 500px;
	background: green;
	margin: auto;
	-webkit-transition: all 1s linear;
	}
 
 #kwadrat:hover{
  background: greenyellow;
}
 
#pole:hover{
  background: gray;
}
 
 
 
  </style>
 
</head>
<body>
<div id="pole">
<div id="kwadrat">
</div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

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

gothye

2.03.2012, 22:12:43

[HTML] pobierz, plaintext 
#kwadrat:hover #pole {background-color: silver}
[HTML] pobierz, plaintext

JustHuman4

2.03.2012, 23:13:21

Taa fajnie by było gdyby to było takie proste... Przecież to nie działa :/

Orzeszekk

3.03.2012, 01:20:40

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()"/>

viking

3.03.2012, 09:56:10

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

by_ikar

3.03.2012, 12:18:32

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..

kamil4u

3.03.2012, 13:48:02

Jak zmienisz trochę HTML to da radę:

[CSS] pobierz, plaintext 
    <html>
    <head>
    <title>bleble</title>
 
    <style type="text/css">
    #pole{
    position: relative;
    width: 1000px;
    height: 1500px;
    background: lime;
    margin: auto;
     top: -500px;
     z-index: 10;
    }
 
    #kwadrat{
    width: 500px;
    height: 500px;
    background: green;
    margin: auto;
    position: relative;
    z-index: 20;
    }
 
    #kwadrat:hover{
    background: greenyellow;
    }
 
    #kwadrat:hover + #pole{
    background: gray;
    }
 
 
 
    </style>
 
    </head>
    <body>
 
    <div id="kwadrat"></div>
    <div id="pole"></div>
 
    </body>
    </html>
[CSS] pobierz, plaintext

A jak nie możesz to właśnie JS:

Kod

function swapColors()
{
document.getElementById('pole').style.backgroundColor = "gray";
}

JustHuman4

3.03.2012, 14:55:22

Ślicznie dziękuję

Pozdrawiam

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.