鼠标放上显示边框

最新推荐文章于 2024-07-16 22:00:27 发布

原创最新推荐文章于 2024-07-16 22:00:27 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用CSS实现多个相同宽度元素并排显示且仅显示单一外边框的方法。通过设置浮动、相对定位及特定的边界样式，可以使得每个元素间只保留一条连续的边框。这种布局方式适用于创建整洁的网格布局。

如下图所示：

这里写图片描述

CSS样式：

 <style>    
    .test {
      width: 100px;
      height: 200px;
      border: 1px solid #ddd;
      float: left;
      margin-left: -1px;  /*清除右边框让其显示一条边框*/
      position: relative;  /*鼠标放上让其定位，相对定位占位置，绝对定位不占位置，后面浮动的div会跑到下面*/
    }
    .test:hover {
      border: 1px solid #e92322;
      cursor: pointer;
      z-index: 1;      
    }
  </style>


HTML代码：

  <div class="box">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
  </div>