Eli siis miten onnistuu linkin alleviivaaminen, kun hiiri on linkin päällä? Eli siis tällä tavoin http://wordpress.org/ Jos tämän pystyisi tekemään ilman javascriptiä olisi hyvä.
Tämän saa tehtyä käyttämällä CSS tyyliä:
http://www.w3schools.com/css/css_intro.asp
a:hover {text-decoration: underlined}ton pistät headiin <style> ja </style> tagien sisään
Tuo on vähän huono esimerkki, koska se on hover-linkille. Laittaisit vaikka:
p.alaviivaus { text-decoration: underlined; }TGunner kirjoitti:
Tuo on vähän huono esimerkki, koska se on hover-linkille.
Kuis niin? Eikös se ole juuri sitä, mitä kysyttiin? Joskin arvo on underline ilman deetä.
Ja pitää vielä huomauttaa, että siitä alleviivauksesta on paljon enemmän hyötyä silloin, kun hiiri EI ole sen linkin päällä. Hiiren ollessa linkin päällä, linkkiyden näkee kursorista, joka muuttuu sormeksi. Hiiren ollessa jossain muualla alleviivaus on paras keino näyttää "tässä on linkki", älkää rikkoko sitä.
Miten se onnistuu niinkuin tuolla wordpressissä eli kun minulla on border-bottom: solid; niin haluisin sitä borderia paksuntaa linkin alapuolelta 1px:ästä 5px:ään?
koko muoto väri
esim.
border-bottom: 5px solid #ff00ff;
tai sitten vain border-bottom: 5px solid;, jolloin värinä käytetään oletusväriä tai perittyä väriä.
Eikus, aivan, sori Matso. En lukenut kysyjän kysymystä tarkasti.
Kiitos kaikille.. sain sen toimimaan silleen kuin halusin...
TGunner kirjoitti:
Tuo on vähän huono esimerkki, koska se on hover-linkille. Laittaisit vaikka:
p.alaviivaus { text-decoration: underlined; }
Tuohan vaan alleviivaa tekstin staattisesti. Jos haluaa linkkiin alleviivauksen, kun hiiren laittaa sen päälle, tuo a:hover on hyvä linkkeihin (muuhun ei kai toimi), mutta jos haluaa sen normaaliin tekstiin, niin pitää laittaa vähän monimutkaisemmin:
<!--HTML-dokumentti tekstin dynaamisella alleviivauksella-->
<html>
<head>
<style type="text/css" language="css">
p.hiiriPaalla{text-decoration:underline;}
p.hiiri{text-decoration:none;}
</style>
<!--Tai sitten erillisellä CSS-tiedostolla tyyli.css, jossa ois sama koodi ku noiden style-tagien välissä-->
<link rel="stylesheet" language="css" type="text/css" href="tyyli.css">
</head>
<body>
<p onMouseOver='this.className="hiiriPaalla"' onMouseOut='this.className="hiiri"' class="hiiri">
Tämä teksti alleviivautuu, kun hiiri on sen päällä, ja palaa normaaliksi, kun hiiri ei ole sen päällä</p>
</body>
</html>Olen noiden css-juttujen kanssa havainnut myös sivun http://hc-codes.net hyväksi.
Nuo onmouseoverit (huomaa, pienellä kirjaimet) ja muut eventit ovat siis JavaScriptiä ja :hover-pseudotsydeemit toimii kyllä kaikilla muillakin elementeillä. Ainoa poikkeus tästä on luonnollisesti Internet Explorer.
Minkähän mukaan nuo eventit pitää pienellä kirjoittaa? Jos nyt w3:n sivuja kahtuu niin siellä on kyllä isot ja pienet kirjaimet miten sattuu. Kyllä minusta on selkeempää käyttää onMouseOver, kuten monen muun kielen kirjoitusohjeissa neuvotaan.
tsuriga kirjoitti:
Minkähän mukaan nuo eventit pitää pienellä kirjoittaa?.
HTML:ssä ei oo väliä, XHTML:ssä kaikki pienellä.
Nii joo, en kai minä aatellu että joku vielä vääntäis ihan perus hötömölöä :) Nykyaikaa, kaverit, nykyaikaa!
Toimii :hover IE:lläkin kaikilla elementeillä jos jaksaa vähän säätää: whatever:hover
Aihe on jo aika vanha, joten et voi enää vastata siihen.