Anzeige ein weiterer container auf input:focus mit nur css

Ich möchte ein paar css-Eigenschaften auf der input:focus, so wie ich es machen kann?
Mein Szenario ist; wenn der input-Fokus erhalten, möchte ich ein weiteres div, so wie kann ich das machen, dass nur mithilfe von css?

Auf hover kann ich tun, dass die Verwendung von ">", aber im Mittelpunkt steht nicht die Arbeit und ich don t verstehen, warum :(.

also das ist mein code:

<div class="containerTooltipXxx">
 <p class="paragraphClass">
     Some text...<br /><input type="radio" /><br />More text...
     </p><div class="blocks">
<label>Field</label>  <input></input></div>
</div>




  .containerTooltipXxx{
        padding: 20px; 
        position: relative;
        float: left;
        display: inline-block;
        border: 2px solid lime;
        margin: 50px;
    }

    .paragraphClass{display: none;}

.containerTooltipXxx:hover > .paragraphClass, .containerTooltipXxx:focus > .paragraphClass{
        display: block;
        position: absolute;
        top:-5px;
        left: 50px;
        background: red;
        opacity:.9;
    }

sehr wichtig, die html-Hierarchie kann nicht geändert werden.
Danke.

fiddle

  • So wollen Sie nicht schweben in alle?
  • Nein, ich möchte zeigen, dass .paragraphClass nur auf input:focus. Ich möchte das gleiche Verhalten von schweben im Fokus.
InformationsquelleAutor mcmwhfy | 2013-07-02
  1. 5

    mithilfe von CSS können Sie nur Punkt zum nächsten gleichgeordneten Elemente. Da der p-tag ist aus dem übergeordneten div ist es nicht möglich mit css.

    Ich weiß, dass Sie nicht wollen, ändern Sie die HTML-Bestellung, aber ich bin noch zeigen, dass Sie es zum Beispiel.

    Bewegen p-tag innerhalb des div.blocks können dies tun, nur mit CSS

    .blocks input[type="text"]:focus ~ .paragraphClass {
    display: block;
    position: absolute;
    top:-50px;
    left: 50px;
    background: #ccc;
    opacity:.7;
}

    DEMO

    • danke aber ich sagte schon, ich kann nicht ändern, html-Hierarchie, also der paragraf muss von aussen div class="blocks" 🙁
    InformationsquelleAutor Sowmya
  2. 2
    .containerTooltipXxx:hover >  replace this by
.containerTooltipXxx:focus ~ .paragraphClass
{
  display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
    opacity:.9;
}
    • Ich habe die gleiche Antwort unten gegeben durch "Sowmya" aber ich sagte doch bereits, ich kann nicht ändern, html-Hierarchie.
    InformationsquelleAutor sidhewsar
  3. 1

    Ihre ersten hover-Selektor ist in Ordnung, aber die zweite ist falsch.

    Was Sie tun mit .containerTooltipXxx:focus > .paragraphClass, ist die Auswahl der unmittelbaren Kind .paragraphClass von einem fokussierten .containerTooltipXxx. Fokus kann nur auf Dinge, die mit der Eingabe und dem container ist nur eine von div.

    Was Sie brauchen ist eine Eltern-Selektor, aber diese sind derzeit nicht verfügbar. Sie werden wahrscheinlich in CSS4. http://www.w3.org/TR/selectors4/#subject

    Derzeit, Ihre beste Wette wäre, mit javascript. Machen Sie einen Ereignis-listener für Fokus auf das Eingabefeld, und dann programmgesteuert anwenden einer Klasse sichtbar, was Sie zeigen wollen.

    InformationsquelleAutor Aart Stuurman
Schreibe einen Kommentar