Question

我正在使用此网站https://blog.udemy.com/xampp-tutorial/

我的灯箱有问题。如果你将鼠标悬停在它们之上，那么Box会转到下一行，因为我正在尝试进行悬停转换。

这是HTML：

<section id="collegas">
     <h2>COLLEGA'S</h2>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_bas.jpg"><p>Bas</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_debbie.jpg"><p>Debbie</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_eefje.jpg"><p>Eefje</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_francien.jpg"><p>Francien</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_frank.jpg"><p>Frank</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_gonnie.jpg"><p>Gonnie</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_henk.jpg"><p>Henk</p></a>
</section>

这就是css：

#collegas img {
    border: 0;
    transition: all 0.3s ease 0s;
    display:block;
}

#collegas img:hover {
  box-shadow: inset 0 0 0 5px #e84e0e;
  -webkit-box-shadow: inset 0 0 0 5px #e84e0e;
  -moz-box-shadow: inset 0 0 0 5px #e84e0e;
  padding: 10px;
}

#collegas a {
    width: 33%;
    display: block;
    padding: 0px 15px 0px 15px;
}

你们怎么解决这个问题？盒子留在原地？谢谢您的帮助。

Answer 1

将#collegas a的高度设置为固定值，例如130px。

#collegas a {
    width: 33%;
    display: block;
    padding: 0px 15px 0px 15px;
    height: 130px;
}

由于悬停过渡，href会移动

1 个答案: