Class toevoegen door middel van een hover (zonder js)

[mauricedb]

Is het mogelijk om een class aan bijv. een span toe te voegen door middel van een hover op die span? Ik weet dat het mogelijk is met behulp van javascript en dat heb ik ook wel werken (zat in voorbeeld, maar dan met een click), maar ik wil het liefst zonder javascript werken.

Het voorbeeld dat gebruik maakt van javascript: http://css3.bradshawenterprises.com/sliding/

Ik heb zitten kijken en zoeken maar ik kom er niet verder mee, ik weet dus ook niet of dit mogelijk is, wat ik wil.

[OkkE]

Je bedoelt span:hover{} ?

[8088]

Wat is je doel? Waarom volstaat element:hover niet?

[mauricedb]

Onee, ik heb helemaal verkeerd zitten kijken. Ik dacht, als ik een class kan toevoegen aan een span, dan ben ik er, maar het mechanisme om een afbeelding dan naar links of naar rechts te laten zweven zit ook in die javascript verwerkt. Oftewel ik moet eerst dat in CSS3 werkend hebben.

Wat mijn doel is: ik wil een grote afbeelding hebben met daarnaast drie/vier alinea's tekst (drie/vier berichten) en op het moment dat ik bijv over bericht twee hover, dat dan de afbeelding die daarbij hoort tevoorschijn komt. Ik zou dan ook willen dat als je er niet overheen hovert, hij dan automatisch van de berichten/afbeeldingen één voor één laat zien.

[ Voor 38% gewijzigd door mauricedb op 03-12-2012 16:37 ]

[NMe]

Wat dat voorbeeld laat zien ga je niet zomaar gedaan krijgen zonder javascript. Waarom die wens om het zonder javascript te doen? Een klein scriptje zoals dit gaat geen problemen opleveren met laadtijd ofzo en met goeie styling kun je leuk graceful degraden.

[mauricedb]

Ik ben een beetje erop tegen om javascript te gebruiken aangezien je geen controle hebt op de gebruikers of ze wel of geen javascript aan hebben staan. Het grote gros zal het vast niet blokkeren, maar dat heb je dus niet in de hand. Javascript gebruiken bij een kleine functie zal wel niet veel opvallen als een gebruiker het uit heeft staan, maar wat ik wil moet op de home page komen te staan en als dat dan niet werkt (om welke reden ze dan javascript uit hebben staan) dan vind ik dat niet netjes .

[RM-rf]

mauricedb schreef op maandag 03 december 2012 @ 17:15:
Ik ben een beetje erop tegen om javascript te gebruiken aangezien je geen controle hebt op de gebruikers of ze wel of geen javascript aan hebben staan. Het grote gros zal het vast niet blokkeren, maar dat heb je dus niet in de hand. Javascript gebruiken bij een kleine functie zal wel niet veel opvallen als een gebruiker het uit heeft staan, maar wat ik wil moet op de home page komen te staan en als dat dan niet werkt (om welke reden ze dan javascript uit hebben staan) dan vind ik dat niet netjes .

anderszijds, CSS is dan ook niet bedoeld om essentiele functionaliteiten te bevatten..
het uitzetten of aanpassen van CSS is nog eenvoudiger en is zelfs soms zo bedoeld (bv door verschillende ccss-files voor verschillende mediatypes of zelfs verschillende device-widths te serveren).

Het is technisch best mogelijk, zelfs bv om animaties en transformaties via een :hover pseudoclass op te roepen, maar als het het functioneren van je site zou kunnen 'breken', is het zeker geen betere oplossing dan javascript (persoonlijk vind ik wel andere voordelen aan transitions kleven)

[8088]

mauricedb schreef op maandag 03 december 2012 @ 17:15:
Ik ben een beetje erop tegen om javascript te gebruiken aangezien je geen controle hebt op de gebruikers of ze wel of geen javascript aan hebben staan. Het grote gros zal het vast niet blokkeren, maar dat heb je dus niet in de hand.

Ondersteuning voor CSS transitions heb je evenmin in de hand. O.a. alle IEs behalve IE10 ondersteunen dat niet, dat is een behoorlijk marktaandeel. Ik gok (en dat kun je vast opzoeken) dat JavaScript een veiligere keuze is, zeker met graceful degradation.

[ Voor 40% gewijzigd door 8088 op 03-12-2012 17:24 ]

[Bosmonster]

8088 schreef op maandag 03 december 2012 @ 17:22:
[...]

Ondersteuning voor CSS transitions heb je evenmin in de hand. O.a. alle IEs behalve IE10 ondersteunen dat niet, dat is een behoorlijk marktaandeel. Ik gok (en dat kun je vast opzoeken) dat JavaScript een veiligere keuze is, zeker met graceful degradation.

Dit..

JS heeft waarschijnlijk 95%+ CSS3 support heeft misschien 60%+ in NL.

Beiden heb je niet in de hand, maar vooralsnog (en dat zal nog wel even zo blijven met het IE-gebruik) blijft JS de "way to go". Sommige effecten kun je best met CSS3 transities oplossen als ze niet noodzakelijk zijn, maar wordt het echt interactie, dan wil je toch met JS aan de slag.

[ Voor 24% gewijzigd door Bosmonster op 04-12-2012 10:23 ]

[OkkE]

Ik ben het met de eerdere posters eens dat je hier beter Javascript voor kunt gebruiken. Maar als een proof-of-concept is het in theorie wel mogelijk met CSS, hoewel dit eigenlijk misbruik is

Online voorbeeld op jsFiddle (incl. klik voor active): http://jsfiddle.net/okke/7FbVn/2/
(Uiteraard alleen in Chrome en Firefox getest )
.

HTML:

<ul>
    <li id=item1>
        <img src="http://cambelt.co/200x150/1" />
        <p><a href="#item1">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue.</a></p>
    </li>
    <li id=item2>
        <img src="http://cambelt.co/200x150/2" />
        <p><a href="#item2">Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris.</a></p>
    </li>
    <li id=item3>
        <img src="http://cambelt.co/200x150/3" />
        <p><a href="#item3">Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo.</a></p>
    </li>
</ul>

Cascading Stylesheet:

ul {
    margin: 0;
    list-style: none;
    position: relative;
    padding-left: 210px;
}
li {
    margin-bottom: 0.5em;
}
li:target {
    background: #eee;
}
li:hover {
    background: #ddd;
}
li img {
    width: 200px;
    height: 150px;
    display: none;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}
li:hover img,
li:target img {
    display: block;
    z-index: 2;
}
li:hover img {
    z-index: 3;
}
li:first-child img {
    display: block;
}
li a {
    color: #000;
    text-decoration: none;
}

[Bosmonster]

Maar hij wil ook dat ze automatisch gaan routeren als je er niet overheen gaat en dat zie ik met CSS alleen even niet gebeuren

[mauricedb]

Het zou wel moeten kunnen, zie demo 3 op deze site:

http://css3.bradshawenterprises.com/cfimg/

Ik denk dat ik dan voor het hoveren javascript moet gebruiken en dat het automatisch routeren via css3 kan gebeuren. Hierdoor missen mensen die geen javascript aan hebben staan enkel de optie om een bericht te selecteren, maar dat breekt de functie verder niet af want op elk bericht zit gewoon een doodnormaal linkje naar het volledige bericht toe.

[Raem]

Dat werkt dan weer niet in IE9 en lager en daarmee breek je dus wel een functionaliteit af van de website. Zoals al eerder is gezegd, je kunt beter javascript gebruiken. Het aantal bezoekers dat IE9 of lager gebruikt is groter dan het aantal dat javascript uit heeft staan.

[OkkE]

Bosmonster schreef op dinsdag 04 december 2012 @ 12:47:
Maar hij wil ook dat ze automatisch gaan routeren als je er niet overheen gaat en dat zie ik met CSS alleen even niet gebeuren

Daar had ik overheen gelezen. Dat maakt het vrijwel onmogelijk inderdaad. Je zou nog iets met @-webkit-keyframes kunnen verzinnen, maar dan is het echt niet meer dan een useless proof-of-concept.

Dit soort dingen horen gewoon met Javascript.

[mauricedb]

Hmm ja daar hebben jullie gelijk in. Dan ben ik als ik dit wil toch genoodzaakt JS te gebruiken. Bedankt voor de reacties .