driehoekje rollover

Status
Niet open voor verdere reacties.
P

Pellekaart

Gebruiker
Lid geworden
25 jun 2012
Berichten
48
Met CSS een mooi driehoekje gemaakt, zie hieronder.
Nu wil ik zo'n zelfde driehoekje (maar dan de kleur iets anders) als rollover maken.

Deze plaats ik in een externe stylesheet.

Hoe kan ik het makkelijkste deze rollover maken?

driehoekje:

(html)
</head>
<body>
<div id="driehoek"></div>

</div>
</body>


(CSS)

div#driehoek {
border-left-width: 3em;
border-left-style: solid;
border-left-color: rgba(255,255,255,1);
border-bottom-width: 3em;
border-bottom-style: solid;
border-bottom-color: rgba(255,255,255,1);
border-right-width: 3em;
border-right-style: solid;
border-right-color: rgba(255,0,0,1);
top: 100px;
width: 25px;
border-top-width: 3em;
border-top-style: solid;
border-top-color: rgba(255,255,255,1);
float: left;
left: 100px;
position: fixed;
}

groet Pellekaart
 
Laatst bewerkt:
div#driehoek:hover {
border-left-width: 3em;
border-left-style: solid;
border-left-color: rgba(255,255,255,1);
border-bottom-width: 3em;
border-bottom-style: solid;
border-bottom-color: rgba(255,255,255,1);
border-right-width: 3em;
border-right-style: solid;
border-right-color: rgba(255,0,0,1);
top: 100px;
width: 25px;
border-top-width: 3em;
border-top-style: solid;
border-top-color: rgba(255,255,255,1);
float: left;
left: 100px;
position: fixed;
}
Klik om te vergroten...
 
bedankt Milenko!

Nu had ik deze al in mijn CSS staan maar de 'hover' deed het niet??

Maar nu ben ik eruit, ik had 'm vergeten te benoemen in mijn html;

</head>
<body>
<div id="driehoek"></div>
<div id="driehoek:hover"></div>

</div>
</body>
</html>

-----

daar moet ie dus ook in staan anders gebeurd er dus niets..

groet, Pellekaart
 
Hoi Pellekaart,
daar moet ie dus ook in staan anders gebeurd er dus niets..
Klik om te vergroten...
Euh, hier breekt een klompje! :eek:
Zo'n <div id="driehoek:hover"></div> begrijp ik niets van: nog nooit gehoord of gezien dat een ID een :hover achtervoegsel kan hebben. *).
Wat ik wel begrijp: er staat een </div> te veel vlak voor de </body>. ;)

Als ik dit doe (als het alpha-kanaal op 1 staat, is ie niet nodig > dan hoeven ook geen maatregelen genomen te worden voor browsers die rbga niet aan kunnen):
HTML: 
...
<style type="text/css">
#driehoek {
	position: fixed;
	top: 100px;
	left: 100px;
	border: 3em solid;
	border-color: white red white white;
	}
#driehoek:hover,
#driehoek:focus {
	border-color: white green white white;
	}
</style>

</head>

<body>
	<div id="driehoek"></div>
</body>
</html>
... dan komt het groene driehoekje bij hoveren gewoon tevoorschijn.


  • Test: driehoekje.htm
  • (bij een position:fixed kan de float:left weggelaten worden; de width:25px hoeft ook niet)

Met vriendelijke groet,
CSShunter
_________
*) Ben wel heel erg benieuwd naar je werkend voorbeeld: kan je dat online zetten?
 
Laatst bewerkt:
dag CSShunter,

Die Div hoeft inderdaad helemaal niet!
Het werkt zo prima.
Wel vraag ik me af wat die ''#driehoek:focus'' nu toevoegd of inhoud?

Verder wil ik de driehoek ook linken, dus er bijvoorbeeld een 'onclick - ga naar ...' van maken.
Als ik dit doe door een hyperlink, dan moet dat volgens mij d.m.v. een tekst en zonder tekst werkt dat niet.
Ik weet niet of dat met <a href> gaat lukken dus..

Ga ik nog naar kijken..

groeten en bedankt!
Pellekaart
 
Ik heb het driehoekje nu 'gelinkt'

En de oplossing vond ik in een ouder item van dit forum.
Zie de link hieronder:

</head>
<body>
<div id="driehoek" onclick="location.href='http://helpmij.nl/';" style="cursor: pointer;"></div>

</html>
 
Focus
Wel vraag ik me af wat die ''#driehoek:focus'' nu toevoegt of inhoudt?
Klik om te vergroten...
De :focus is wat er moet gebeuren met een element als dat "focus" krijgt. Wie niet met een muis surft, kan niet hoveren over het scherm, en de hover-veranderingen zijn niet te zien!
Maar het is ook mogelijk om alleen met het toetsenbord te surfen. Dan kan je met de Tab-toets de verschillende links op een pagina bereiken. De link waar je je bevindt, krijgt dan focus, te zien aan een klein stippelrandje eromheen. Als een link focus heeft, kan je vervolgens de Enter-toets gebruiken om naar de link te gaan (= klikken met de muis).
Voor een touchpad geldt dacht ik hetzelfde.

Wil je dus de muis-loze surfers ook van de kleur- of andere veranderingen bij een hover laten genieten, dan moet behalve de :hover ook de :focus er in gezet worden. Als je het gewend bent, gaat het in één moeite door, maar helaas wordt het heel vaak vergeten, waardoor de site een stuk minder toegankelijk wordt.
Vooral als een pagina wat heftig is in het kleurgebruik, kunnen de stippelrandjes niet of nauwelijks opvallen. Of erger: de webmaker heeft ze uitgeschakeld omdat ze "niet mooi" zijn.
Wie dan geen muis gebruikt (of kan gebruiken; bv. mensen met een verminderde hand-motoriek), is de pineut: hij/zij weet niet waar hij/zij op de pagina is, en hoe hij/zij een link moet vinden en opvolgen...

Kortom: belangrijk!

=======

Gelinkte driehoekjes
De driehoekjes kunnen wel gewoon in een <a>-link opgenomen worden :) , daar is geen inhoud van de link voor nodig (en geen onclick-javascript).
Een border wordt n.l. toegevoegd aan de breedte/hoogte van een element, en bij een breedte/hoogte van nul is er dus alleen de border.
  • Vandaar dat ik in m'n voorbeeld de width:25px er zonder schadelijke gevolgen uit kon halen.

Verder speelt bij een link wel iets anders m.b.t. de breedte mee: in jouw geval aan de linkerkant van het driehoekje. Daar zit een blanco gebied naast het driehoekje (en net zo groot), dat óók hoverbaar en klikbaar is.
Dat kan niet anders, want als je de drie witte borders zou weglaten, is het geen rood driehoekje meer, maar alleen een rechthoekige rode rechter-border.

Maar je kunt dat loze gebied wel maskeren: door er iets overheen te plakken dat hoger in de lagen-opbouw zit. Dan is de linkerhelft overdekt met een gebied dat niet hoverbaar en klikbaar is. De linkerhelft van het driehoekje (dat eigenlijk een vierkantje is!) kan niet meer op de hover reageren, en de kleur blijft dan rood: alleen de rechterhelft doet het nu.



Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan