css的并列元素的hover鼠标悬停边框变色
想弄类似这样的悬停的边框颜色变化，两张图鼠标都是停在第二格，我自己做的第二格的右边会被第三格遮挡看原网页用的用的margin-left：-1px把盒子贴在一起的，不知道接下来怎么操作，望大神解救
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent{
width: 300px;
height: 100px;
overflow: hidden;
background: yellow;
}
.parent>div{
width: 96px;
height: 96px;
border: 2px solid #000;
float: left;
}
.parent>div:hover{
border-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent{
width: 300px;
height: 100px;
overflow: hidden;
background: yellow;
}
.parent>div{
width: 96px;
height: 96px;
border: 2px solid #000;
float: left;
}
.parent>div:hover{
border-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
这样样子并不会盖住呀！
但是按您提供的代码这样弄的话，比如您设置了2px；中间在鼠标悬停之前看起来是4px的，我想要的是在悬停之前看起来也是2px这样的，我看x宝的就是这样弄的
审查一下元素呗！看看X宝是怎么弄的！我看你给的图，这不知是设置了边框。貌似还设置了阴影之类的，如果再利用position这个hover状态的div的z-index高一些，就能达到这个效果了！
温馨提示：答案为网友推荐，仅供参考
相似回答