Wie Overall mit einer Höhe transformieren css3

Ich versuche, eine Gruppe von Boxen zu erstellen, wo zu Beginn wenige Informationen hat, und wenn der Mauszeiger über mehr Informationen zeigt. Ich habe es geschafft, aber ich habe ein Problem mit der Position der anderen Boxen. Jedes Mal, wenn ich über eine Box schwebe, ändern die anderen ihre Position, weil ich im Hover eine Höhe und eine Breite anwende. Es funktioniert gut, wenn ich die Höhe und Breite in Hover kommentieren, aber ich brauche de box-shadow jederzeitWie Overall mit einer Höhe transformieren css3

Hier erhalten können Sie den Test überprüfen: https://jsfiddle.net/p4av5ejv/

HTML:

<div class="partnerLlistat"> 
        <div id="partnerBox" class="partnerBox"> 
        <div id="partnerData"> 
         <h3>Field1: Test test</h3> 
         <h4>Field2: test</h4> 
         <p id="type">Field3: test</p> 
         <p id="address">Field4: test</p> 
         <p id="phone">Field5: 111</p> 
         <p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p> 
         <p id="mail">Field7: [email protected]</p> 
         <p id="offer">Field8: test test</p> 
        </div> 
        </div> 

        <div id="partnerBox" class="partnerBox"> 
        <div id="partnerData"> 
         <h3>Field1: Test test</h3> 
         <h4>Field2: test</h4> 
         <p id="type">Field3: test</p> 
         <p id="address">Field4: test</p> 
         <p id="phone">Field5: 111</p> 
         <p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p> 
         <p id="mail">Field7: [email protected]</p> 
         <p id="offer">Field8: test test</p> 
        </div> 
        </div> 

        <div id="partnerBox" class="partnerBox"> 
        <div id="partnerData"> 
         <h3>Field1: Test test</h3> 
         <h4>Field2: test</h4> 
         <p id="type">Field3: test</p> 
         <p id="address">Field4: test</p> 
         <p id="phone">Field5: 111</p> 
         <p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p> 
         <p id="mail">Field7: [email protected]</p> 
         <p id="offer">Field8: test test</p> 
        </div> 
        </div> 

        <div id="partnerBox" class="partnerBox"> 
        <div id="partnerData"> 
         <h3>Field1: Test test</h3> 
         <h4>Field2: test</h4> 
         <p id="type">Field3: test</p> 
         <p id="address">Field4: test</p> 
         <p id="phone">Field5: 111</p> 
         <p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p> 
         <p id="mail">Field7: [email protected]</p> 
         <p id="offer">Field8: test test</p> 
        </div> 
        </div> 
       </div>

CSS:

Ich kann CSS-Code nicht definieren, weil ich nicht weiß, wie man gut formatiert, um gültig zu sein. Einchecken jsFiddle Link.

Kann mir jemand dabei helfen ?, Ich googelte viel und stapelte viel, aber nichts, was ich brauche.

Vielen Dank für Ihre Zeit!

Quelle

2016-04-28 Jj Jj

OK. Ich habe die Lösung gefunden.

HTML

<li id="partnerBox" class="partnerBox"> 
         <h3>Nom: aaa</h3> 
         <h4 class="VisibleOnHover">Entitat: aaa</h4> 
         <p>Tipus de servei: aaa</p> 
         <div class="VisibleOnHover"> 
          <p>Adreça: aaa</p> 
          <p>Telèfon: 111</p> 
          <p>Pàgina web: <a ref="external" target="_blank" href="http://aaa.net">http://aaa.net</a></p> 
          <p>Correu electrònic: [email protected]</p> 
          <p>Avantatge que ofereix: aaa aaa</p> 
         </div> 
        </li> 

        <li id="partnerBox" class="partnerBox"> 
         <h3>Nom: bbb bbb</h3> 
         <h4 class="VisibleOnHover">Entitat: bbb</h4> 
         <p>Tipus de servei: bbb</p> 
         <div class="VisibleOnHover"> 
          <p>Adreça: bbb</p> 
          <p>Telèfon: 111</p> 
          <p>Pàgina web: <a ref="external" target="_blank" href="http://bbb.net">http://bbb.net</a></p> 
          <p>Correu electrònic: [email protected]</p> 
          <p>Avantatge que ofereix: bbb bbb</p> 
         </div> 
        </li> 

        <li id="partnerBox" class="partnerBox"> 
         <h3>Nom: ccc ccc</h3> 
         <h4 class="VisibleOnHover">Entitat: ccc</h4> 
         <p>Tipus de servei: ccc</p> 
         <div class="VisibleOnHover"> 
          <p>Adreça: ccc</p> 
          <p>Telèfon: 111</p> 
          <p>Pàgina web: <a ref="external" target="_blank" href="http://ccc.net">http://ccc.net</a></p> 
          <p>Correu electrònic: [email protected]</p> 
          <p>Avantatge que ofereix: ccc ccc</p> 
         </div> 
        </li> 

        <li id="partnerBox" class="partnerBox"> 
         <h3>Nom: ddd ddd</h3> 
         <h4 class="VisibleOnHover">Entitat: ddd</h4> 
         <p>Tipus de servei: ddd</p> 
         <div class="VisibleOnHover"> 
          <p>Adreça: ddd</p> 
          <p>Telèfon: 111</p> 
          <p>Pàgina web: <a ref="external" target="_blank" href="http://ddd.net">http://ddd.net</a></p> 
          <p>Correu electrònic: [email protected]</p> 
          <p>Avantatge que ofereix: ddd ddd</p> 
         </div> 
        </li> 
       </ul>

Auch hier weiß ich nicht, wie hier formatiert CSS einzufügen, so überprüfen jsfiddle Link Code zu sehen.

Überprüfen Sie this, um zu sehen, wie man das löst. In jfiddle können Sie nicht gut schätzen, weil Sie Padding und Rand in der .partnerllistat> li [id^= "partnerBox"]: Hover-Regel auf Ihre Website abstimmen müssen.

Quelle

2016-05-03 13:37:19

Wie Overall mit einer Höhe transformieren css3

Antwort

Verwandte Themen