Forum PHP.pl > [HTML][CSS] Zmiana koloru tła DIV'a drugiego obiektu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Zmiana koloru tła DIV'a drugiego obiektu

shpaque

19.08.2013, 20:22:59

Witam serdecznie - szukam i szukam i nic...

Jak zrobić w css, żeby po akcji "hover" zmieniło mi się tło innego layera / obiektu?

[HTML] pobierz, plaintext 
<style>
#pierwszy-obiekt:hover
{
background-color (#drugi-obiekt): #000000;
}
</style>
[HTML] pobierz, plaintext

coś w tym stylu... Chciałbym żeby po najechaniu na id='pierwszy' zmienił się background elementu o id='drugi' - i to w css a nie js. I nie chodzi o klasy tylko id...

[HTML] pobierz, plaintext 
#table-image1:hover CO TUTAJ, ŻEBY ZADZIAŁAŁO NA #shape1
{
background-color: #000000;
-webkit-transition: background-color 500ms ease 0ms;
-moz-transition: background-color 500ms ease 0ms;
-ms-transition: background-color 500ms ease 0ms;
transition: background-color 500ms ease 0ms;
}
[HTML] pobierz, plaintext

mar1aczi

19.08.2013, 21:36:34

Domniemam, że musisz skorzystać z js: http://www.w3schools.com/jsref/event_onmouseover.asp

_Borys_

19.08.2013, 21:55:31

[HTML] pobierz, plaintext 
<html>
<head>
   <style type="text/css">
 
#pierwszy-obiekt,#drugi-obiekt{
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    background-color: beige;
}
 
#pierwszy-obiekt:hover ~ #drugi-obiekt
{
background-color: blue;
}
 
   </style>
</head>
<body>
<div id="pierwszy-obiekt"></div>
<div id="drugi-obiekt"></div>
</body>
</html>
[HTML] pobierz, plaintext

shpaque

19.08.2013, 22:05:35

więc powinno być coś takiego?

[HTML] pobierz, plaintext 
#table-image1:hover
{
opacity: 0.3;
-webkit-transition: opacity 500ms ease 0ms;
-moz-transition: opacity 500ms ease 0ms;
-ms-transition: opacity 500ms ease 0ms;
transition: opacity 500ms ease 0ms;
}
#table-image1:hover ~ #shape1
{
background-color: #000000;
-webkit-transition: background-color 500ms ease 0ms;
-moz-transition: background-color 500ms ease 0ms;
-ms-transition: background-color 500ms ease 0ms;
transition: background-color 500ms ease 0ms;
}
[HTML] pobierz, plaintext

_Borys_

19.08.2013, 22:11:14

No tak, u mnie działa twój CSS.
Daj opacity dla #table-image1:hover ~ #shape1

shpaque

20.08.2013, 16:37:40

za Chiny nie idzie... Nie wiem czemu - dlatego poprawiłem pierwszy post - żeby wszyscy zainteresowani wiedzieli o co chodzi. Przeszukałem internet przez całą noc, kombinowałem w kodzie i... nic. Poznajdywałem oczywiście na JS, czy jeśli chodzi o klasę danych divów, ale na ID nie wiem...

Próbowałem już na chybił-trafił tak:

[HTML] pobierz, plaintext 
#table-image1:hover
{#shape1
  {
  background-color: #000000;
  -webkit-transition: background-color 500ms ease 0ms;
  -moz-transition: background-color 500ms ease 0ms;
  -ms-transition: background-color 500ms ease 0ms;
  transition: background-color 500ms ease 0ms;
  }
}
[HTML] pobierz, plaintext

...ale oczywiście nic...

Czy to jest takie trudne, czy po prostu w CSS nie ma możliwości, żeby tak zrobić..?

lobopol

20.08.2013, 17:02:48

1. To co podałeś nie ma prawa działać bo po zagnieżdżałeś sobie css, pokaż kod na jsfiddle
2. x ~ y celuje w elementy y znajdujące się na tym samym poziomie co x i muszą występować po nim czyli

[HTML] pobierz, plaintext 
<div id="a"></div>
<div id="b"></div>
[HTML] pobierz, plaintext

możesz zrobić

[CSS] pobierz, plaintext 
#a:hover ~ #b {
  background: red;
}
[CSS] pobierz, plaintext

ale już
ten kod nie zadziała dla czegoś takiego:

[HTML] pobierz, plaintext 
<div id="b"></div>
<div id="a"></div>
[HTML] pobierz, plaintext

lub

[HTML] pobierz, plaintext 
<div><div id="a"></div></div>
<div id="b"></div>
[HTML] pobierz, plaintext

lub

[HTML] pobierz, plaintext 
<div id="a"></div>
<div><div id="b"></div></div> //  w tym przypdaku jeszcze można celować w #a:hover ~ div #b
[HTML] pobierz, plaintext

shpaque

20.08.2013, 17:15:03

czyli jedyna opcja to elementy następujące po sobie? Inaczej tylko JS?

lobopol

20.08.2013, 17:17:10

Tak

shpaque

20.08.2013, 17:22:54

w takim razie już wszystko wiem i dziękuję za poświęcony czas.

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.