高さ変換を使ってオーバーレイする方法

最初は情報が少なく、ホバー表示で詳細情報を表示するボックスのグループを作成しようとしています。私はそれを達成しましたが、私は他の箱の位置に関連する問題があります。私が1つのボックスの上にマウスを置くたびに、他の人は、ホバーで高さと幅を適用しているので、その位置を変更します。それは私がホバーに高さと幅をコメントが、私はすべての時間高さ変換を使ってオーバーレイする方法

でデボックスシャドウを維持する必要がある場合はここでは、テストを確認することができ、正常に動作：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リンクをチェックインしてください。

私はこれを手伝ってもらえますか？

ありがとうございました！

出典

2016-04-28 Jj Jj

OK。私は解決策を見つけた。

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"]：ホバールールのパディングとマージンを調整する必要があるので、うまく理解できません。

出典

2016-05-03 13:37:19

高さ変換を使ってオーバーレイする方法

答えて

関連する問題