鼠标放上有阴影效果,显得立体:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
transition: all 1s;
}
div:hover {
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
鼠标放上有边框且不撑开盒子:
原理:利用伪元素创建一个和父亲盒子一模一样大小的盒子,接着让伪元素定位压着父亲盒子,在鼠标放上时显示伪元素的边框。
注意:伪元素要用css3box-sizing: border-box;盒模型
方法1:
该方法使用于用背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 632px;
height: 340px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
div:hover::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 10px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="mi.jpg" alt="">
</div>
</body>
</html>
方法2:该方法适用于背景图案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 150px;
background-color: green;
float: left;
margin-left: 10px;
/*有一个和背景颜色一样的边框*/
border: 2px solid green;
}
div:hover{
border: 2px solid red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
盒子间的边框线合并案例
盒子紧挨,本身有个浅灰色的边框为1px,中间紧挨部分也为1px,鼠标放上对应盒子边框显示不同颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 250px;
height: 400px;
border: 1px solid #ccc;
float: left;
/*使div中间的线只有1px,由于浮动的特性,第二个元素先挨着第一再向左移动*/
margin-left: -1px;
}
div:hover {
border: 1px solid #f40;
/*使得鼠标放上的盒子边跨都有颜色,相对定位不脱离标准流,但是是浮起来了,所以层级高*/
/*如果不设置这个的话,后一个div压着前一个,鼠标放上盒子的右边框不是hover设置的颜色*/
position: relative;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
若每个盒子已经设置过相对定位,则可用z-index来解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 250px;
height: 400px;
border: 1px solid #ccc;
float: left;
margin-left: -1px;
/*盒子内部用到相对定位*/
position: relative;
/*默认z-index: 0;*/
}
div:hover {
border: 1px solid #f40;
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>