WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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