淘宝商品块，鼠标移上去改变边框样式的写法

最新推荐文章于 2022-08-17 15:50:07 发布

M1racle_l

最新推荐文章于 2022-08-17 15:50:07 发布

阅读量932

点赞数

本文链接：https://blog.csdn.net/m0_37890907/article/details/69695616

版权

html代码

<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	
	
</body>
</html>

CSS代码

	<style>
		div {
			float: left;
			width: 200px;
			height: 400px;
			border: 10px solid #ccc;
			margin-right: -10px;/*防止边框并列而导致块的边框不一致，使每个块向左移动10px,盖住左侧块的边框*/

		}
		div:hover {
			position: relative;/*解决被盖住的一侧边框样式被盖住的情况*/
			border: 10px solid red;
		}
	
	</style>

主要是margin为负数时候的用法，还有相对定位的用法。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

M1racle_l

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
淘宝商品块，鼠标移上去改变边框样式的写法

html代码 CSS代码 div { float: left; width: 200px; height: 400px; border: 10px solid #ccc; margin-right: -10px;/*防止边框并列而导致块的边框不一致，使每个块向左移动10px,盖住左侧块的边框*/ } div:hover
复制链接

扫一扫