Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: :hover dla kilku elementow
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
shycat
20.01.2011, 01:27:57
Witam, mam taki kod:

Kod
<style>

p, span
{
  background-color:lightblue;
}

p
{
  margin:0;
  padding:5px
}

span{display:block;overflow:hidden;height:1px}
span.r1{margin:0 9px}
span.r2{margin:0 6px}
span.r3{margin:0 4px}
span.r4{margin:0 3px}
span.r5{margin:0 2px;height:2px}
span.r6{margin:0 1px;height:3px}

span:hover, p:hover
{
  background-color:red
}

</style>



<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span><span class="r5"></span><span class="r6"></span>
<p>abc</p>
<span class="r6"></span><span class="r5"></span><span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>



I zastanawiam sie jak zrobic, zeby po najechaniu na ten "przycisk" z zaokraglonymi rogami, aby zmienil sie caly jego kolor, a nie kolory poszczegolnych jego elementow jak jest w tym przykladzie:

Kod
span:hover, p:hover
{
  background-color:red
}
Zajec
20.01.2011, 21:44:02
Opakuj całość jakimś divem i zrób
Kod
div.opakowanie:hover > * { background-color: red; }
shycat
20.01.2011, 23:31:06
ok, dzieki za odpowiedz, teraz dziala jak powinno. Moglbym jeszcze prosic o informacje jak "to dziala" ? w jakich przypadkach mozna tego uzywac itd... niestety nie mam pojecia jak mozna to znalezc na googlach, wiec w sumie sama "nazwa" tego "tricku" mi wystarczy, dzieki smile.gif

ps. no i niestety to w IE nie dziala... jest jakis sposob, zeby w IE ten "trick" tez dzialal?
Damonsson
20.01.2011, 23:48:50
nadaj czerwone tło dla każdego elementu który jest dzieckiem diva o class "opakowanie", ale tylko wtedy gdy jest nad nim kursor myszki

div.opakowanie:hover > * { background-color: red; }

winksmiley.jpg

To żaden trick, zwykły css.
Zajec
21.01.2011, 00:05:01
Cytat(shycat @ 20.01.2011, 23:31:06 ) *
ok, dzieki za odpowiedz, teraz dziala jak powinno. Moglbym jeszcze prosic o informacje jak "to dziala" ? w jakich przypadkach mozna tego uzywac itd... niestety nie mam pojecia jak mozna to znalezc na googlach, wiec w sumie sama "nazwa" tego "tricku" mi wystarczy, dzieki smile.gif

ps. no i niestety to w IE nie dziala... jest jakis sposob, zeby w IE ten "trick" tez dzialal?
W jakim IE? IE miało problemy z :hover chyba tylko w wersji 6. Mam nadzieję, że nie przejmujesz się 2,5% polskiego rynku, które w dodatku powoli znika? smile.gif
shycat
21.01.2011, 00:31:48
Damonsson, dzieki za konkretne wyjasnienie smile.gif



hm, ja mam IE 8 (oczywiscie do testow stron) i tez nie dziala
Zajec
22.01.2011, 12:43:11
Cytat(shycat @ 21.01.2011, 00:31:48 ) *
hm, ja mam IE 8 (oczywiscie do testow stron) i tez nie dziala
Podaj adres lub jakiś test-case.
shycat
22.01.2011, 17:22:14
Kod
<style>

p, span
{
  background-color:lightblue;
}

p
{
  margin:0;
  padding:5px
}

span{display:block;overflow:hidden;height:1px}
span.r1{margin:0 9px}
span.r2{margin:0 6px}
span.r3{margin:0 4px}
span.r4{margin:0 3px}
span.r5{margin:0 2px;height:2px}
span.r6{margin:0 1px;height:3px}

div.opakowanie:hover
>*{
background-color: red;
}

</style>




<div class="opakowanie">

<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span><span class="r5"></span><span class="r6"></span>
<p>abc</p>
<span class="r6"></span><span class="r5"></span><span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>

</div>
Zajec
23.01.2011, 11:40:12
Cytat(shycat @ 22.01.2011, 17:22:14 ) *
(...)

Nie mam teraz IE pod ręką, ale nigdy nie próbowałem łamać regułek CSS w "połowie". Może to przeszkadza IE?
shycat
23.01.2011, 18:50:05
Cytat(Zajec @ 23.01.2011, 11:40:12 ) *
[...] w "połowie" [...]



Tzn? smile.gif bo nie bardzo rozumiem
Zajec
24.01.2011, 19:41:07
Cytat(shycat @ 23.01.2011, 18:50:05 ) *
Tzn? smile.gif bo nie bardzo rozumiem
Ups, myślałem że zrozumiale to piszę smile.gif
Kod
div.opakowanie:hover
>*{
zamień na
Kod
div.opakowanie:hover > * {

Czyli po prostu w jednej lini. Spacje są opcjonalne, je IE na pewno zrozumie. Może po prostu IE nie rozumie łamania linii (rozbijania regułki na dwie linie).
shycat
25.01.2011, 21:11:13
ee dalej nie dziala winksmiley.jpg
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.