Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

visibility

visibility-ominaisuudella määritellään elementin näkyvyys. Ominaisuudelle voidaan antaa neljä arvoa:

visibility-ominaisuuden arvot
Arvo Selitys Huomiot
visible Elementti piirretään normaalisti. Oletusarvo.
hidden Elementtiä ei piirretä lainkaan, eli se on täysin läpinäkyvä. Ei vaikutusta asetteluun.
collapse Luhistaa taulukoiden rivejä, sarakkeita ja näiden ryhmiä. Muissa elementeissä vastaa hidden-arvoa.
inherit Ominaisuus perii arvonsa emoelementiltään.

DOM-viittaus: olio.style.visibility

Esimerkki

Tämän esimerkin toiminnallisuus vaatii tyylitukea.

Edellisen taulukon viimeiselle riville on pyydetty seuraava tyylimääritys:

#esimerkkirivi {
visibility:visible;/*oletusarvo*/
}

Lisätietoja englanniksi

Käytännön sovellus: kuvien esikatselu

Seuraavassa toteutetaan kuvien esikatselu sijoitettujen elementtien näkyvyyttä vaihtamalla. Vaihto aktivoituu osoitusselektorilla (:hover):

Esimerkkikuva 1Esikatselukuva 1
Valinnainen kuvateksti 1

esimerkkikuva 2Esikatselukuva 2
Valinnainen kuvateksti 2

Merkkauksessa emona on DIV-elementti, joka sisältää kaksi A-elementtiä (linkittävt isoihin kuviin). Linkkien lapsina sitten miniatyyrit (esikatselukuvat pienenettyinä) ja kätketyt SPAN-elementit, jotka sisältävät esikatselukuvan ja valinnaisen kuvatekstin:

<div class="kuvalohko">
<a 
 class="mini"
 href="kuvat/isokuva1.jpg"><img
 src="kuvat/kuva1.jpg"
 width="135"
 height="101"
 alt="esimerkkikuva 1"
 border="0" /><span><img
 src="kuvat/kuva1.jpg"
 alt="Esikatselukuva 1" />
 <br />Valinnainen kuvateksti 1</span></a>
<br />
<a 
 class="mini"
 href="kuvat/isokuva2.jpg"><img
 src="kuvat/kuva2.jpg"
 width="135"
 height="101"
 alt="esimerkkikuva 2"
 border="0" /><span><img
 src="kuvat/kuva2.jpg"
 alt="Esikatselukuva 2" />
 <br />Valinnainen kuvateksti 2</span></a>
</div>

Tyyleissä elementteihin viitataan seuraavasti:

/* Perustetaan uusi asemointilohko jälkeläisille: */
.kuvalohko {
position:relative;
}
/* Esikatselukuvat: */
.mini span {
/* Piilotetaan aluksi: */
visibility:hidden;
/* Irrotetaan ne elementtivirrasta: */
position:absolute;
/* Muita ulkoasumäärityksiä tarpeen mukaan: */
border:1px dashed #000;
text-decoration:none;
background-color:#9ff;
color:#000;
}
/* Osoittimen siirtyessä miniatyyrin päälle: */
.mini:hover span {
/* Pyydetään esikatselukuvat esille: */
visibility:visible;
/* Esikatselukuvien sijainti asemointilohkossa: */
top:0;/*suhteessa yläreunaan*/
left:150px;/*suhteessa vasempaan reunaan*/
}
CSS 2.1 -ominaisuusreferenssi | CSS 2.1 -asetteluominaisuudet