gewusst wie: ändern der Höhe einer div bei hover und mit transition (Priorität von CSS ohne Javascript)

Dies ist der code

HTML

<div id="footmain">
    <div id="col1" class="mark"></div>
    <div id="col2" class="mark"></div>
    <div id="col3" class="mark"></div>
    <div id="col4" class="mark"></div>
</div>

sehen hier ein Beispiel mit der CSS, die ich habe:

http://jsfiddle.net/EtBKx/8/

Muss ich fallen lassen mit der Umstellung, beginnend langsam, schnell, langsam fertig.
jQuery ist die Letzte Möglichkeit, denn ich will, ohne JavaScript, und für mehrere Browser und CPU-Geschwindigkeit.

Kompatibel mit tablets und smartphones, ist es besser, einen trigger in der unteren rechten Seite der jeweiligen Registerkarte, mit der beide Funktionen von hover und clicked?, oder ein <"ein">Richtung<"/a"> link, kann angeklickt werden, sobald zu löschen und eine weitere zu gehen, um die Richtung?

InformationsquelleAutor Ignacio Bustos | 2012-03-02
  1. 4

    Modifizierte ich Ihr mal ein wenig:
    http://jsfiddle.net/EtBKx/17/

    im Grunde alle, die ich aufgenommen wurde

        *vendorprefix*-transition: height ease 1s;

    "Leichtigkeit" definiert eine animation beginnt langsam, wird schnell und endet langsam.
    Oh, und Sie hatte .Marke :hover (mit Leerzeichen), die nicht funktioniert, .Marke:hover ist das, was Sie wollen.

    Mehr über die übergänge:
    http://www.w3schools.com/css3/css3_transitions.asp
    http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

    • mit Ihrem code, dass ist sehr gut, ich habe dieses problem (vielleicht aufgrund der relativen position der "col4" jsfiddle.net/EtBKx/26 ich will, dass alle zu schweben und auf den nächsten content
    • Sie möchten col4 zu decken auch die Inhalte unter? Dann ja, es zu verändern position: absolute würde den trick tun, aber da dieser ebenfalls entfernt es aus dem documentflow, werden Sie brauchen, um zu definieren ein element enthalten die mit einer festen Höhe (100px in Ihrem Fall), die ist nicht entfernt von der documentflow.
    • ok, das war die Lösung, ich machte es mit meiner eigenen nur eine Sekunde vor, das problem ist nun, wie dies mit screentouch wie Tabletten, ich will berühren Sie das div-Element einmal zu ändern, die Höhe und wieder in Inhalten, die im inneren zu bewegen, die link wie normal. (die erste nur verschieben, klicken Sie auf die Registerkarte, aber nie den link zu öffnen.9
    • Ich fürchte, ich kann nicht viel helfen kann, aber Sie könnten versuchen, zu verbergen der link zeigt textlabel statt und nutzen :aktiv pseudoclass zu blenden Sie die Beschriftung und zeigen Sie stattdessen die Verknüpfung...aber diese Art von Pausen, die es für die anderen Browser, die Sie auslösen :nur aktiv, solange Sie halten Sie die Maustaste gedrückt.
    InformationsquelleAutor Kisaro
  2. 0

    jQuery-Lösung (ist es nicht langsam Ihre Anwendung):

    http://jsfiddle.net/EtBKx/16/

    Schrieb ich nur die core-syntax, Sie können nun ersetzen Sie die .css mit .animieren, und fügen Sie alle Effekte, die Sie brauchen.

    CSS3-Lösung (nicht mit allen Browsern kompatibel)

    http://jsfiddle.net/EtBKx/22/

    EDIT:

    Finden Sie bei dieser link

    • krank werden, suchen Sie den javascript code für den IE mit, vielen Dank
    InformationsquelleAutor Andrea Turri
Schreibe einen Kommentar