怎样让鼠标滑过每个元素时加边框,但是原来的位置不会因为边框而轻微移动
来源:互联网 发布:淘宝防止举报 编辑:程序博客网 时间:2024/06/02 11:34
再写页码的时候,希望鼠标滑过每一行的数字时,他会自动加个边框。但是加了边框肯定就影响原来的位置啦。
这时我们需要在开始的时候就加一个和背景一样颜色的边框。这样hover的时候就不会移动位置啦
<div class="pagination">
<ul >
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">></a>
</li>
</ul>
</div>
.pagination ul li{
display:inline-block;
padding:10px 16px;
cursor:pointer;
border: 2px solid #F8F2DA;
}
.pagination ul li:first-child{border:2px solid #333;}
.pagination ul li a{color:#333;font-size:18px;font-weight:bold;display:block;}
.pagination ul li:hover{border:2px solid #333;}
.pagination ul li a:hover{text-decoration: none;}
下面重新补充一个朋友提供的更加简单的方法,
再鼠标划过时,添加边框,再加一个margin设置成负数,值就是你所设的边框的宽度。
- 怎样让鼠标滑过每个元素时加边框,但是原来的位置不会因为边框而轻微移动
- 鼠标滑过边框加阴影css3
- 无边框窗体随着鼠标的移动而移动,类似于qq的登录界面
- CSS——给图像加边框时不会产生位置偏移
- c# 鼠标移动带边框的pictureBox
- 给你的元素加个边框吧!多重边框、圆角边框、多重圆角边框统统都可以!
- div边框随着滚动条的移动而移动
- 鼠标经过选项,浅色边框变成红色边框,原来的浅色竖线被覆盖;尽量但是不改变原来选项的盒子的大小的方法;如图效果
- Silverlight Textbox,Password去除鼠标滑过边框
- 无边框的TextBox 且鼠标移动到TextBox控件上也无边框
- Qt无边框窗口的移动、拉伸边框、鼠标滚轮缩放大小
- HTML鼠标移动到图片上时显示阴影边框
- CSS鼠标悬停div加边框效果
- 怎样让<img>图片的边框不显示
- hover加边框或边框加粗元素不抖动
- 移动端用伪元素画div的上下边框
- table鼠标移动背景,边框颜色改变
- 加双层边框的代码
- 欢迎使用CSDN-markdown编辑器
- Reactor模式详解
- qq分享时mainActivity的主要代码
- 【Objective-C基础】自定义对象归档
- 利用ContentProvider的添加数据
- 怎样让鼠标滑过每个元素时加边框,但是原来的位置不会因为边框而轻微移动
- JVM异常查看工具
- JAVA程序员面试总结,高手整理加强版
- c#unicode转中文
- 0-1背包问题
- 【Objective-C基础】数据持久化--对象归档
- 值得推荐的C/C++框架和库
- springmvc.xml
- web.xml中的url-pattern详解