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链接。

任何人都可以帮我这个吗？我搜索了很多东西，并且堆栈溢出了很多，但没有什么我需要的。

感谢您的时间！

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＆gt;中的填充和边距。 li [id ^ =“partnerBox”]：将规则悬停在您的网站上。

如何过度使用高度变换css3

1 个答案: