Forum PHP.pl > hover działający na wiele div jednocześnnie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: hover działający na wiele div jednocześnnie - jak?

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

miki_kol

10.02.2012, 21:07:28

Jak w temacie
Mam div CONTENT trzymający szerokość strony - załóżmy że 960px. wewnątrz div TRESC wyrównaną do lewej - 600px oraz div MENU wyrównane do prawej - 300px. Tło warstwy TRESC oraz MENU jest półprzeźroczyste czyli alpha 0.5. Zrobiłem alpha 1.0 dla opcji hover.

Teraz pytanie: Ma może ktoś sposób by zrobić tak by po najechaniu na treść opcja hover działała i na treść i na menu? Inaczej... by hover działało na wiele warstw jednocześnie i w jednym czasie.

Obecnie mam tak że jak najadę mychą nad treść to działa tylko na tresc, jeśli najadę na menu to działa tylko na menu. Potrzebuję by działało jednocześnie na obydwa (w tym wypadku) elementy. Wiem że jest to możliwe ale nie znalem kodu do podglądu nigdzie niestety

Dzięki za wszelkie sugestie.

toaspzoo

10.02.2012, 21:49:26

onmouseover = "funkcja()" ...

<script>

function funkcja(){

$('#element').css("background", "red");

}

</script>

A resztę sam skumasz

miki_kol

10.02.2012, 22:36:07

Z całym szacunkiem... chciałbym ale nie skumam. Na pewno nie znam javascript (wnioskuję że to jest to) a już na pewno nie połączę tego z css. Przepraszam ale tu akurat przydałoby sie "jak krowie na rwie". dzięki

gothye

10.02.2012, 22:36:17

albo :

[HTML] pobierz, plaintext 
$('.klasa_css').hover(function(){
    $(this).css('background','red');    
},function(){
    $(this).css('background','white');
})
[HTML] pobierz, plaintext

toaspzoo

10.02.2012, 23:38:14

Najważniejsze przed tym kodem

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>[
 
[HTML] pobierz, plaintext

nie zapominajmy, że to wdzięczne jquery !

miki_kol

11.02.2012, 14:19:41

Dzięki za dotychczasową pomoc i o ile udało mi się poprawnie zaimplementować ten kod to .... nie jest to tak jak bym chciał. W dalszym ciągu jest tak że jak najadę nad TRESC zmienia się tylko tło pod treścią a gdy nadjadę nad MENU zmienia się tylko tło pod menu. Chciałbym by po najechaniu w dowolne miejsce (treść lub menu) tło zmieniało się i tu i tu jednocześnie.

dodałem za ostatnim korzystającym z tego skryptu divem

[HTML] pobierz, plaintext 
<script>
$('.tlo').hover(function(){
    $(this).css('background','red');    
},function(){
    $(this).css('background','white');
})</script>
[HTML] pobierz, plaintext

Coś jednak nie tak robię bo nie jest tak jak wspomniałem wcześniej. Na teraz mam to samo co zrobiłem z samego css.

Może jeszcze jakieś pomysły? będę wdzięczny

Już znalazłem. Rozwiązanie okazało się łatwiejsze niż myślałem i obeszło się tylko za pomocą czystego css.
Oto mały przykład załatwiający całkowicie mój problem

[HTML] pobierz, plaintext 
<html>
<head>
<style type="text/css">
body{background:#006600;}
.div0{border:#555 1px solid; padding: 5px; opacity: 0.6;}
.div0:hover{border:#555 1px solid; padding: 5px; opacity: 0.9;}
.div1{border:#555 1px solid; width:100px; height: 100px;background:#aaa;}
.div2{border:#555 1px solid; background:#aaa; width:100px; height: 100px;}
</style>
</head>
 
<body>
<div class="div0">
<div class="div1">HELLO</div><br/>
<div class="div2">W3SCHOOLS</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Dzięki za pomoc. Można zamknąć temat

toaspzoo

11.02.2012, 16:47:38

[js]

<script>
$('.tlo').hover(function(){
$(this).css('background','red');
},function(){
$(this).css('background','white');
})</script>

[/js]

zamiast this podaj konkretne elementy

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.