如何使用高度變換css3

我想創建一組框，其中開始時有幾個信息，當懸停時顯示更多信息。我實現了它，但是我遇到了與其他盒子的位置有關的問題。每次我將鼠標懸停在一個框上時，其他人都會改變其位置，因爲我在懸停時應用了高度和寬度。它正常工作，如果我評論懸停高度和寬度，但我需要在所有的時間如何使用高度變換css3

這裏保持去的box-shadow，你可以檢查測試：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：

我無法定義CSS代碼，因爲我不知道如何格式化才能生效。檢查jsFiddle鏈接。

任何人都可以幫助我嗎？，我GOOGLE了很多，堆棧溢出很多，但沒有什麼是我需要的。

謝謝你的時間！

來源

2016-04-28 Jj Jj

好的。我找到了解決方案。

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>

再說一遍，我不知道怎麼在這裏插入格式化的CSS，所以檢查的jsfiddle鏈接以查看這些代碼。

檢查this看看如何解決這個問題。在jsfiddle中，您無法欣賞，因爲您必須調整.partnerLlistat> li [id^=「partnerBox」]：hover規則中的填充和邊距到您的網站。

來源

2016-05-03 13:37:19

如何使用高度變換css3

回答

相關問題