Autor |
Nachricht |
qualidat
Threadersteller
Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht:
|
Verfasst Mi 04.12.2013 13:05
Titel CSS: hover durch Klick emulieren? |
|
|
Transitionen lassen sich per CSS einfach und elegant erledigen, wie das unten angehängte Beispiel zeigt, welches als Basis für Setup-Elemente einer GPS-Anwendung gedacht ist. Schöner wäre es jedoch, wenn der Slider erst bei einem Klick ausfahren würde, statt bereits beim Überfahren mit der Maus. Ich habe auch "active" statt "hover" ausprobiert, aber das vergeht, wenn man die Maus wieder hochnimmt. Kann man mit "active" ausfahren und beim "un-hover" wieder rein?
Ich kenne zwar auch Lösungen in Javascript aber rel. aufwändig mit Timerfunktion usw. ... gehts nicht auch per CSS oder zumindest ähnlich "schlank"? Danke für Tips.
Code: | <html>
<head>
<style type='text/css'>
#sld
{
position:absolute;
left:-190;
top:100;
width:200;
height:200;
background-color:#ff0;
border-radius:4px;
margin:0px;
padding:0px;
transition-property:margin-left background-color;
transition-duration:2s;
}
#sld:hover;
{
background-color:#f00;
margin-left:190;
}
</style>
</head>
<body bgcolor='#333333'>
<div id='sld'>
the slider area<br>
</div>
</body>
</html> |
Zuletzt bearbeitet von qualidat am Mi 04.12.2013 13:06, insgesamt 1-mal bearbeitet
|
|
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Mi 04.12.2013 13:26
Titel
|
|
|
Mit :target eventuell?
|
|
|
|
|
Anzeige
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Mi 04.12.2013 15:42
Titel
|
|
|
Kaum macht man´s richtig, schon geht´s:
http://jsfiddle.net/hwHLq/2/
Code: | <div class="schalter">
<div class="versteckt">Versteckter <br />
Inhalt.</div>
Schalter
</div> |
Code: | .versteckt {
display: none;
}
.schalter:active .versteckt,
.versteckt:hover{
position: absolute;
background-color: #EEF;
display: block;
} |
Allerdings noch nicht mit Patsch-Display getestet. Da wird es vermutlich nicht gehen...
Zuletzt bearbeitet von top am Mi 04.12.2013 15:48, insgesamt 1-mal bearbeitet
|
|
|
|
|
ExMD
Dabei seit: 27.01.2005
Ort: Saarland
Alter: 45
Geschlecht:
|
Verfasst Mi 04.12.2013 17:26
Titel Re: CSS: hover durch Klick emulieren? |
|
|
qualidat hat geschrieben: |
Code: |
#sld:hover;
{
background-color:#f00;
margin-left:190;
}
</style>
|
|
you have a schreibfehler in there
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS - Hover / Link / Bild - Bild verschwindet nach Klick
hover-Button/hover-Bild wird darunter eingefügt
box hover mit css
:hover und ie6
Hover
Hover und ie
|
|