mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 14:04 Benutzername: Passwort: Auto-Login

Thema: CSS: hover durch Klick emulieren? vom 04.12.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS: hover durch Klick emulieren?
Autor Nachricht
qualidat
Threadersteller

Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: Männlich
Verfasst Mi 04.12.2013 13:05
Titel

CSS: hover durch Klick emulieren?

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Mi 04.12.2013 13:26
Titel

Antworten mit Zitat Zum Seitenanfang

Mit :target eventuell?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Mi 04.12.2013 15:42
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
ExMD

Dabei seit: 27.01.2005
Ort: Saarland
Alter: 45
Geschlecht: Männlich
Verfasst Mi 04.12.2013 17:26
Titel

Re: CSS: hover durch Klick emulieren?

Antworten mit Zitat Zum Seitenanfang

qualidat hat geschrieben:


Code:

    #sld:hover;
    {
        background-color:#f00;
        margin-left:190;
    }
    </style>


you have a schreibfehler in there
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.