Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Podświetlenie DIV'a wraz z zawartością
Forum PHP.pl > Forum > Przedszkole
xebo
Witam


Mam pewien problem z podświetleniem div'a jako odnośnika.
Czy jest możliwość aby div ten podświetlał się wraz z zawartościąquestionmark.gif ( znajdują się w nim dwa obrazki )
Chodzi o to aby po najechaniu myszką zarówno div jak i te obrazki zostały nałożone tą samą warstwą koloru.


Proszę o szybką pomoc.
Dzięki.
Pozdrawiam
zegarek84
wewnątrz tego div'a (ALE MUSI MIEĆ JAKIEKOLWIEK POZYCJONOWANIE - wystarczy relative) daj na końcu (wtedy z automatu ma ustawiony wyższy z-index w stosunku do wcześniejszej treści) kolejnego div'a z ustawionym kolorem, ustaw opacity i wypozycjonuj absolutnie top:0, left 0, width: 100%, heigth: 100% - to masz style na warstwę przykrywającą przy hover dla div'a głównego czyli .div_link:hover>.warstwa_przykrywajaca {...}... teraz kwestja ukrywania i pokazywania tej warstwy - można to zrobić na wiele sposobów - ja proponuję domyślnie na .div_link>.warstwa_przykrywajaca {display:none;} - teraz do wersji z hover musisz dodać jeszcze display:block; i to by było na tyle ;]

oczywiście pamiętaj o .div_link { position:relative;}
xebo
#kazz
{

float: left;
width: 30%;
height: 420px;
background-color:#000000;
margin: 0px auto;
}

#gnoyek
{
float: right;
width: 30%;
height: 420px;
background-color:#000000;
margin: 0px auto;
}

#paragraff
{
margin-left: 30%;
border-left: 1px solid white;
margin-right: 30%;
border-right: 1px solid white;
height: 380px;

padding: 20px;
background-color: red;
background: url('images/paragraff.jpg') no-repeat;
background-position: center;
}


Powiem tak, jakbyś mógł to trochę jaśniej ;]

Są trzy divy i każdy z nich to odnośnik.
Look

http://pogaduchynaluzie.xaa.pl/ano/

Teraz może się dogadamy ;]
!*!
Chodzi o to że masz do tych divów dodać jeszcze jeden div. który będzie miał domyśle display:none, po najechaniu myszą (div:hover) dajesz mu display:block a jego wymiary pokrywają się z tym co ma pod spodem.
xebo
Próbuję to zastosować i jakoś nie udaje się...
Mógłby ktoś podać fr kody jak to wyglądać ma?
!*!
http://jsfiddle.net/pzSQt/1/
cer98
  1. <script type="text/javascript">
  2.  
  3. function aktywny(box) {
  4. box.style.background='#f0f0ff';
  5. }
  6.  
  7. function nieaktywny(box) {
  8. box.style.background='#ffffff';
  9. }
  10.  
  11. </script>



  1. <div class="tresc" onmouseover="aktywny(this)" onmouseout="nieaktywny(this)">
  2. text
  3. </div>
  4.  


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