css - 如何使用高度变换 css3 进行叠加

Question

我正在尝试创建一组框，开始时信息很少，悬停时显示更多信息。我做到了，但我遇到了与其他框的位置相关的问题。每次我将鼠标悬停在一个框上时，其他框都会改变它们的位置，因为我在悬停时应用了高度和宽度。如果我在悬停时评论高度和宽度，它工作正常，但我需要始终保持 de 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: test@gmail.com</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: test@gmail.com</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: test@gmail.com</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: test@gmail.com</p>
                        <p id="offer">Field8: test test</p>
                    </div>
                  </div>
              </div>

CSS:

我无法定义 CSS 代码，因为我不知道如何正确格式化才能有效。检查 jsFiddle 链接。

任何人都可以帮我解决这个问题吗？我在 google 上搜索了很多，stackoverflow 了很多，但没有什么是我需要的。

感谢您的宝贵时间!

Answer 1

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

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: aaa@gmail.com</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: bbb@gmail.com</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: ccc@gmail.com</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: ddd@gmail.com</p>
                            <p>Avantatge que ofereix: ddd ddd</p>
                        </div>
                  </li>
              </ul>

同样，我不知道如何在此处插入格式化的 CSS，因此请检查 jsfiddle 链接以查看此代码。

检查 this看看如何解决这个问题。在 jsfiddle 中，您无法很好地理解，因为您必须调整 .partnerLlistat > li[id^="partnerBox"]:hover 规则中的填充和边距以适应您的网站。