En nyt taida olla varma onko oikea alue kysellä, mutta kysytään nyt täällä.
Eli miten CSS:llä tehdään linkki, jossa linkin alla oleva solu muuttaa väriä, kun vie hiiren linkin päälle.
Eli kyse on taulukosta, jossa esim. kahdessa solussa linkit. Kun hiiren vie linkin päälle, niin solun taustaväri vaihtuu sekä solun border muuttu ykköseksi.
Javascriptillä tuon nyt osaan tehdä, mutta käytännössä tuo on mahdollista tehdä pelkällä tyylitiedostolla, joten se kiinnostaisi, miten se tehdään pelkällä tyylillä.
td.jtn {
background-color : rgb(255,255,255);
}
td.jtn:hover {
background-color : rgb(125,125,125);
}<td class="jtn"> <a href="https://www.ohjelmointiputka.net/">Ohjelmointiputka</a> </td>
Linkin alla oleva solu? Oikea järjestys on pistää solun sisään linkki. Ja IE ei tue :hover effektiä muille kuin linkeille, joten yhteensopivin tapa (tarpeesta riippuen tietenkin) on laittaa se linkki sen solun sisään, ja antaa linkille määre display: block, jolloin linkki täyttää koko solun sisällön.
str4nd:
Esimerkkisi ei ainakaan minulla toimi. (IE)
Firefoxilla taas toimii.
Onko jotain määrettä, jolla tuon saisi toimimaan myös IE:llä?
JTS:
Toki tarkoitin, että solun sisällä on linkki :)
Kokeilin myös tuota display blokkia, mutta sekää ei auttanut siihen, että sen olisin saanut toimimaan IE:llä.
Vinkkejä?
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="jtn"><a href="testi.htm">testi</a></td>
</tr>
</table>td.jtn {
background-color : rgb(255,255,255);
}
td.jtn:hover {
background-color : rgb(125,125,125);
}a:link {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #0000CC;
text-decoration: none;
display: block;
}Laita toki ainoastaan a { display: block; + muut määreet }. Nythän tuo tulee ainoastaan jos linkki on link-tilassa (ei visited, active, eikä hover).
Olga kirjoitti:
Laita toki ainoastaan a { display: block; + muut määreet }. Nythän tuo tulee ainoastaan jos linkki on link-tilassa (ei visited, active, eikä hover).
Juu, muut "linkkaukset" ei ole vielä tyylitetty, mutta ei kait niillä pitäisi olla tuohon mitään vaikutusta toimiiko se solun värin vaihto vai ei?
No. testaan kuitenkin.
Toki vaikuttaa. Ota CSS-tiedostosta pois nuo td-elementtien tyylitykset ja laita nuo kaikki linkkien tyylit sinne. Eli kärjistetysti
a {
display: block;
}
a:link, a:visited {
background: #ccc;
}
a:hover, a:active {
background: #c60;
}Eli tuo taustavärin vaihto tehdään toki tuolle linkille eikä tuolle td-elementille, sillä linkin display-määreen ollessa block, se täyttää koko solun kuten aiemmin JTS jo tuolla mainitsi.
ajatuksena on myös tehdä rajaukset kun linkin päälle vie hiirulaisen.
Eli ilmeisesti blokkia käyttämällä voi tehdä myös siten rajauksen? (Kuten solun rajat "border")
Voiko blokin kokoa määritellä vai onko se aina vaan tekstin koko?
Juu, toki voit linkille antaa borderit ja myös sen koon määritellä. Tuon koon kasvattaminen kannattaa tehdä antamalla linkille paddingia, sillä muistaakseni muuten tulee IE:llä jotain ongelmia.
<html>
<body>
<style type="text/css">
a {
display: block;
width: 0px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
a:link, a:visited {
background: pink;
}
a:hover, a:active {
background: green;
}
</style>
<table border=0>
<tr><td width="200px">
<a href="foo">FOO</a>
</td><td>
Muuta tekstiä
</td></tr>
</table>
</body>
</html>Ok. Kiitokset kaikille vastanneille.
Paljon viisastuin ja saan varmaankin neuvoilla toteutettua halaumani.
PS. Ei kukaan tietäisi hyvää Suomenkielistä CSS kirjaa?
Seuraavaa on kovasti kehuttu, onhan Korpela yksi "guruista" :) Hintaa kyllä löytyy, mutta kannatanee katsoa wepin huutokaupoista + muista firmoista.
joo. ostin ton(75 €) ja hyvä on. suosittelen
Aihe on jo aika vanha, joten et voi enää vastata siihen.