Elikkäs..
Käytän sivullani tavallista diviä, jonka sisällä on tekstiä.
Kuinka css on mahdollista toteuttaa niin, että kun divin päälle
viedään hiiri, niin esim. divin borderin väri muuttuisi?
Eli esim.
<div style="background-color: #000;"> <p>Kun viet hiiren tämän divin päälle, divin tausta muuttuu mustasta valkoiseksi</p> </div>
:hover-pseudoluokalla, juuri samoin kuin linkeillekin. Ei sitten toimi IE:llä, tai kutosella ainakaan.
javascriptillä voinee IEn korjata. Seiska tukee hoveria muissakin kuin linkeissä.
Olisiko kenelläkään heittää pientä esimerkkiä asiasta? ;)
tällee:
<div OnMouseOver="this.style.background='white'" OnMouseOut="this.style.background='blue'">
<p>Kun viet hiiren tämän divin päälle, divin tausta muuttuu mustasta valkoiseksi</p>
</div>
#reuna {
background : #000;
border : 2px solid #000;
color : #FFF;
padding : 1px;
}
#reuna:hover {
border-color : green;
}<div id="reuna">
<h1>Oi hienoa</h1>
<p>Reunahan reagoi!</p>
</div>Ja vanhemmat IE:t voi surutta korjata JavaScriptillä, tässä asiassa auttaa hyvin paljon Dean Edwardsin IE7.js, joka lisää olemassaolevan CSS:n toimintaa. Häneltä löytyy nyt myös IE8.js, joka nostaa kaikkien IE-selainten CSS-tuen paremmaksi kuin se on IE7:ssä.
Elikkä lisäät vain tämän koodinpätkän sivun <head>in sisälle:
<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->
Lisää juttua Deanin kotisivuilla. Tuon skriptin lisääminen riittää vallan mainiosti :hover-tuen laajentamiseen kuin myös monien muiden juttujen korjaamiseen. Esim. läpinäkyvät PNG-kuvat korjaantuvat, joskin kuvien nimi pitää päättyä -trans.png kun käyttää tuota virallista Googlen palvelimilta ladattavaa versiota.
Pastean nyt hieman muokatun artikkelin tähän, jota ei ikinä julkaistu. Kirjoitin siis artikkelin IdeaCafeen, http://www.ideacafe.fi
Ensin luodaan div jonka id on "hover". Divin sisään laitetaan lista, jota käskytetään CSS -tiedostosta käsin seuraavilla koodinpätkillä.
Ul-elementin muotoilu
Ensin asetetaan ensin ul -elementille pituus. Ul tekee listan, joten list-style-typen parametri on asetettava arvoon none, jotta listan mukana ei näytetä palluraa tai muitakaan listalle ominaisia piirteitä.
#hover ul {
list-style-type: none;
width: 470px;
}Li -elementin muotoilu
Li -elementti taas määrittelee sen, miltä listan kohdat näyttävät. Margin ja border ovat esimerkissä sen vuoksi, että käsittelyssä oleva div pomppaisi mahdollisimman hyvin kävijän silmille.
#hover li {
border: solid 1px #de87b1;
margin: 5px 0;
}Tässä kohtaa päästään pikkuhiljaa asiaan, eli lähdemme muokkaamaan sitä, miltä divi näyttää. Seuraavassa kohdassa ei vielä määritellä muuta kuin varsinaisen teksti(linkin) väri ja tuupataan se jonkin verran irti reunoista paddingilla. Display: block nostaa listan hieman irti reunoista toisin kuin display -määreen oletusarvo inline. Padding ei toimi tässä esimerkissä ilman displayn block -parametriä, joten se on syytä asettaa.
#hover li a {
color: #6699CC;
display: block;
font: bold 120% Trebuchet MS;
padding: 10px;
}Hover -efekti
Viimeinen kohta on varsinaisen hover -efektin tekeminen. Sitä ei oikeastaan tehdä diville vaan listalle, vaikka otsikko muuta väittääkin. Tästä huolimatta hover -efekti vaikuttaa koko divin alueelle, joka siis on saman kokoinen kuin lista.
#hover li a:hover {
background: #e7f6fd;
}Esimerkkisivu: http://www.ideacafe.fi/esimerkit/hover_efekti.
HTML -sivun löydät osoitteesta: http://ideacafe.fi/esimerkit/hover_efekti.html ja CSS -tiedoston osoitteesta: http://ideacafe.fi/esimerkit/hover_efekti.css CSS -tiedosto on varustettu kommenteilla ja sisältää hieman enemmän koodia kuin tämä artikkeli, jota on luettavuuden vuoksi jouduttu hieman karsimaan. Esimerkin lopusta löytyy myös koodinpätkä, jolla estetään divin ei-toivottu lyhentyminen Explorerin versioissa 5.5 ja 6.0. Se ei ole artikkelissa sen vuoksi, että se ei toimi, mikäli sivulla on useampi lista, joiden pituuksien pitää olla eri mittaisia.
Harmi että tuo vastaus ei vastaa ihan siihen mihin sen pitäisi vastata. Tosin sen vuoksi en kirjoita, vaan lähinnä ajattelin pistää pienen soo soo -viestin puhtaasta omien sivujen mainostamisesta. Ainakaan minusta ei ole kovinkaan kohteliasta mainostaa omia sivuja kirjoittamalla uutena käyttäjänä vain yhden viestin, jossa vastataan yli viikon vanhaan jo vastattuun kysymykseen eikä edes tarjota ratkaisua siihen. :hover kyllä, mutta vääräänlaiseen elementtiin.
Hmm, miten tuo ei vastaisi kysymykseen? Esittämäni tapahan on helvetisti parempi kun nuo viritykset. Okei, tuolla hoveroidaan lista eikä diviä, mutta lopputuloksesta saa TÄYSIN samanlaisen ja kun li-elementti vielä kääritään a-elementin sisään, toimii koko roska myös IE6:lla ilman JS-purkkavirityksiä. Mitä tulee mainostamiseen, vajaan 2500 merkin tekstissä jos on yksi linkki, se ei mielestäni täytä ihan spämmäämisen tai muunkaan mainostamisen tunnusmerkkejä.
PS. Tunnukseni on ollut putkassa vuoden 2003 alusta, mutta jostain syystä viestihistoriani on tyhjentynyt sinä aikana, kun en ole putkaa käyttänyt.
shovi kirjoitti:
PS. Tunnukseni on ollut putkassa vuoden 2003 alusta, mutta jostain syystä viestihistoriani on tyhjentynyt sinä aikana, kun en ole putkaa käyttänyt.
Viestejä ei poisteta pitkänkään poissaolon jälkeen. Onkohan aiempi tunnuksesi tämä?
Näyttäisi olevan, thx! Mulla on varmaankin ollut joskus kaksi tunnusta, kun en muista luoneeni tätä shovi -tunnaria ihan lähiaikoina. Jomman kumman voisi kyllä poistaa.
@shovi: Ideana ihan hauska, mutta jos toteutustapojen (JS vs. merkityksetön a-elementti) purkka-astetta ryhdytään vertaamaan, niin taitaa vaaka kallistua enemmän tuon ylimääräisen linkin puolelle. Luultavasti ne onnettomat jotka IE:tä käyttävät, surffaavat myös JS enabloituna. Tähän yksittäiseen tapaukseen tuo IE7-skripti lienee ehkä vähän turhan overkill, mutta idean ymmärtänee.
shovi: ei välttämättä, sillä linkki ei ole sisältöä, mitä oletan että sinne diviin tässä tapauksessa tungetaan kun erikseen juuri diviä kysytään :) Siinä tapauksessa IE6 on parempi vaan paikata JavaScriptillä tavalla tai toisella kuin alkaa vääntää vaikeamman kautta.
Ja vaikka edellisen viestin paasaukseni menisikin nyt hukkaan, niin ehkäpä se saa jonkun toisen hieman miettimään ennen kuin keksii tehdä mainostelua noin "koska näin jonkun toisenkin tekevän niin". Melkein neljän vuoden poissaolo on kuitenkin yhtä kuin olisit vasta tunnuksesi tehnyt, Antti näemmä siirsi vanhan tunnuksesi viestit tuolle tunnuksellesi.
Mä olen edelleen vahvasti sitä mieltä, että "ylimääräinen" linkki tepsii tässä tapauksessa parhaiten. En kyllä ihan ymmärtänyt, että miksi se olisi ylimääräinen - eihän kukaan tee hover-efektiä elementille joka ei ole linkki? Silloin mentäisiin pahasti puuhun käytettävyyden perussääntöjen kanssa. Lista vs. div on niin pilkunnussintaa, etten viitsi siihen edes puuttua. Mun tapa on kevyt, validi ja toimiva, joten miksei käyttäisi sitä? JavaScriptin käyttäminen on mielestäni onnetonta silloin kun asiat pystyy hoitamaan xhtml+css -yhdistelmällä.
Mitä tulee mainostukseen, niin en vieläkään ymmärrä, mitä niin ihmeellisen pahaa tein? Jos lähtisin jotain mainostamaan, löytyisi varmaan kannattavampia tapoja kuin kirjoittaa järjetön pätkä tekstiä ja saada 7 kävijää siitä vastineeksi (lähde: Google Analytics).
Huomaan, ettette ole myyjiä. Oikea myyjä antaa asiakkaalle sitä mitä asiakas tarvitsee, ei sitä mitä hän haluaa. Tässä tapauksessa ketjun aloittaja tarvitsee mun ratkasua, mutta haluaa tökerön JS-virityksen. Kumpi parempi?
@shovi
Phew, sellaisia ne asiakkaat ovat. Äskenkin yritin tuolla jossain tarjota kevyttä ratkaisua kevyeen peliin miten lähettää dataa toiselle, mutta yrittää tyyppi silti juuri sen vaikeimman kautta. Ehkä sinä voit sillä suuntaa yrittää myös? Minä en viitsi vaivautua, kun en edes myyjäkään ole..
-Grey-
Ja minä kun luulin että tämä on keskustelualue jolla autetaan, neuvotaan ja opastetaan toisia, eikä kauppa. Pahoittelen erehdystäni, menen vastedes neuvomaan sivustojen teossa osoitteeseen www.huuto.net
(Jee, huonoa huumoria. Menee offiksi hiljoksiin, mutta ei voi mitään.)
Muoks!
Koska huumori meni selkeästi ohitse, niin sanotaan suoremmin: lähinnä pidän vertausta epäsopivana, ei täällä olla palvelemassa asiakkaita, täällä ollaan antamassa apua ja neuvoja siihen, miten asiat saa tehdyksi. Ei ole tarkoitus tunkea koodia tyylillä "sun on pakko tehdä tää just tälleen" vaan "voit tehdä näin, koska...".
Linkitetty lista on toki toimiva tapa, mutta se ei toimi kaikkeen. Toisaalta sivuja tehdessä on myös tehtävä joskus niitä virheitä tai kokeiltava eri asioita, jotta voi myöhemmin todeta onko se juttu toimiva vaiko ei. Ei me voida aina antaa täydellistä lopullista vastausta, koska aina se vastaus ei ole täydellinen lopullinen vastaus, toisin kuin mitä se on aina pakosta kun asiakkaalle jotain tarjoat. Asiakkailla harvoin on mitään asiantuntemusta sivujen suhteen, toisin kuin taas toisilla autettavilla sivuntekijöillä, olkoot välillä miten aloittelijoita, harrastelijoita tai osaavia tekijöitä tahansa.
Tällä hetkellä IE6 on kuoleva selain ja a:hover -rajoitus on pian menneen talven lumia.
Ymmärsit Merri varmaan mun vertauksen, joten apinointi on turhaa.
Kyllä itse ainakin keksin muidenkin elementtien hoverille lukuisia käyttötapoja käytettävyyden siitä kärsimättä. Kun kyseessä on ulkoasuun liittyvä kikkailu, niin en kovin mielelläni lähtisi sen vuoksi ylimääräisiä elementtejä koodin sekaan heittelemään. Ja kuten Merri yllä totesikin, IE6:sta ja vanhemmista versioista ei toivon mukaan tarvitse enää kovinkaan kauan kärsiä.
"Huumori" meni tosiaan ohi. Sä tartut nyt kohtaan "myynti ja asiakas" kun mun oikea pointti vertauksessa oli "tässä on mitä tarvitset, ei mitä haluat". Tietyillä sivuilla voi jättää IE6:n huomiotta (vaikkapa tuo IdeaCafe), koska meidän kävijöistä kolme prosenttia käyttää sitä. Toisaalta, suurimmassa osassa sivuja joutuu silti tekemään kaiken niin, että homma toimii myös IE:llä. Mä en ollenkaan nauti siitä, kun joudun kikkailemaan winellä IE6:n käyntiin, juoksemaan mäkkini ääreen koodaamaan, uppimaan palvelimelle ja juoksemaan takaisin olohuoneeseen reloadaamaan IE:n. Se on kuitenkin tietyissä tapauksissa pakollista.
Edelleen sanon, että hoverin asettaminen elementtiin, joka ei ole linkki, on käytettävyysitsemurha. Näin ollen a-elementti ylläolevassa esimerkissä ei ole turha ja vaikka olisikin, se toimii huomattavasti paremmin kuin JS -viritykset. Faktahan on se, että kaikilla ei yksinkertaisesti sitä JS:ää ole päällä, lisäksi se kestää kauemmin ladata kuin muutama a-elementti... syitä on paljon. Valitse niistä suosikkisi. Puhutaan pienistä asioista, mutta erityisesti isommissa proggiksissa merkittävistä asioista.
Olga, kuulisin hyvin mielelläni, miten hoveria voi käyttää linkittömään elementtiin käytettävyyden kärsimättä. Valista minua.
Aihe on jo aika vanha, joten et voi enää vastata siihen.