A z-index dinamikus módosítása

A :hover dinamikus álosztály kijelölő segítségével a z-index növelése útján előtérbe hozhatjuk azokat a HTML elemeket, amelyek fölött az egérkurzor áll. Tipikus felhasználási terület a képtárak készítése.

1. példa:

Az elem, amely fölött az egérkurzor áll előreugrik.

Forráskód

<style>
....
       #Elso:hover { z-index: 5; }      
       #Masodik:hover { z-index: 5;}
       #Harmadik:hover { z-index: 5; }  
</style>     
...
<body>            
  <div class="tarolo"> 
    <div id="Elso" >Első elem </div> 
    <div id="Masodik">Második elem </div> 
    <div id="Harmadik" >Harmadik elem..</div> 
  </div>   
</body>

Eredmény*

2. példa:

A kép, amely fölött az egérkurzor áll előreugrik.

Forráskód

<style>
....
       #Elso:hover { z-index: 5; }      
       #Masodik:hover { z-index: 5;}
       #Harmadik:hover { z-index: 5; } 
</style>     
...
<body>            
  <div class="tarolo"> 
    <div id="Elso" >...</div> 
    <div id="Masodik">...</div> 
    <div id="Harmadik" >...</div> 
  </div>   
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_position_absolute_din_zindex_02.html