主页 / 问题 / 567780
Accepted
Bim Bam
Asked:2020-09-19 07:51:51 +0000 UTC2020-09-19 07:51:51 +0000 UTC

边框移动元素，如何解决？

  • 772

实际上，当您将鼠标悬停在一个元素上时，它的“邻居”开始移动并扭曲整体画面。这怎么能解决？

.inv_item {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  cursor: pointer;
}
.inv_item:hover {
  border: 1px solid #fff;
}
.inv_item img {
  width: 110px;
  height: auto;
  border-radius: 10px;
}
.inv_item p {
  position: absolute;
  bottom: 0px;
  left: 0px;
  min-width: 110px;
  text-align: center;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom-left: 10px;
  border-bottom-right: 10px;
}
<div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>

css

4 个回答

  1. Best Answer

    添加.inv_item { border: 1px solid transparent; }：

    .inv_item {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  cursor: pointer;
  
  border: 1px solid transparent;
}
.inv_item:hover {
  border: 1px solid #fff;
}
.inv_item img {
  width: 110px;
  height: auto;
  border-radius: 10px;
}
.inv_item p {
  position: absolute;
  bottom: 0px;
  left: 0px;
  min-width: 110px;
  text-align: center;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom-left: 10px;
  border-bottom-right: 10px;
}
    <div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="http://www.adolph-numerical.co.uk/images/100x100.gif" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>

    • 3

  2. 你为什么要这样做？，将默认元素设置为 border: 1px solid transparent 并在悬停时传递 border-color: white。或者通过 :hover {box-shadow: 0 0 0 1px black} 属性来实现，你没有边框，你在悬停时设置它，元素变大一个像素，box-sizing 无济于事。

    • 3

  3. 在这种情况下，可以简单地使用outline，这不会影响几何

    .inv_item {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  cursor: pointer;
}
.inv_item:hover {
  outline: 1px solid #888;
}
.inv_item img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.inv_item p {
  position: absolute;
  bottom: 0px;
  left: 0px;
  min-width: 100px;
  text-align: center;
  font-size: 15px;
  background-color: rgba(192, 192, 192, 0.8);
  border-bottom-left: 10px;
  border-bottom-right: 10px;
}
    <div class="inv_item">
  <img class="inv_img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDUgMjAsOTcgOTUsMzkgNSwzOSA4MCw5NyIgc3R5bGU9ImZpbGw6bGltZTtzdHJva2U6cHVycGxlO3N0cm9rZS13aWR0aDo1O2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDUgMjAsOTcgOTUsMzkgNSwzOSA4MCw5NyIgc3R5bGU9ImZpbGw6bGltZTtzdHJva2U6cHVycGxlO3N0cm9rZS13aWR0aDo1O2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDUgMjAsOTcgOTUsMzkgNSwzOSA4MCw5NyIgc3R5bGU9ImZpbGw6bGltZTtzdHJva2U6cHVycGxlO3N0cm9rZS13aWR0aDo1O2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>
<div class="inv_item">
  <img class="inv_img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDUgMjAsOTcgOTUsMzkgNSwzOSA4MCw5NyIgc3R5bGU9ImZpbGw6bGltZTtzdHJva2U6cHVycGxlO3N0cm9rZS13aWR0aDo1O2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==" alt="" />
  <p class="inv_name">Lorem ipsum</p>
</div>

    • 2

  4. 所以悬停时一切都是正确的，添加了一个边框，这就是它们跳跃的原因。边框出现在框外，没有尝试 box-sizіng: border-box; inv_item { 显示：内联块；位置：相对；顶部边距：5px；框大小：边框框；}

    • 0

相关问题