Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

Class toevoegen door middel van een hover (zonder js)

Pagina: 1
Acties:

  • mauricedb
  • Registratie: Maart 2007
  • Laatst online: 23:03
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
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

Je bedoelt span:hover{} ?

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • 8088
  • Registratie: December 2000
  • Niet online

8088

NaN

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

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?


  • mauricedb
  • Registratie: Maart 2007
  • Laatst online: 23:03
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
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

NMe

Quia Ego Sic Dico.

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. :)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • mauricedb
  • Registratie: Maart 2007
  • Laatst online: 23:03
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 :P.

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 23-11 17:28

RM-rf

1 2 3 4 5 7 6 8 9

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 :P.
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)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


  • 8088
  • Registratie: December 2000
  • Niet online

8088

NaN

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 ]

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?


  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-11 09:49

Bosmonster

*zucht*

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
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

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 :Y))
.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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;
}

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-11 09:49

Bosmonster

*zucht*

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
  • Registratie: Maart 2007
  • Laatst online: 23:03
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
  • Registratie: Oktober 2005
  • Laatst online: 00:21
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.

https://psnprofiles.com/RaemNL


  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11 15:46

OkkE

CSS influencer :+

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.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • mauricedb
  • Registratie: Maart 2007
  • Laatst online: 23:03
Hmm ja daar hebben jullie gelijk in. Dan ben ik als ik dit wil toch genoodzaakt JS te gebruiken. Bedankt voor de reacties :).
Pagina: 1