css的并列元素的hover鼠标悬停边框变色
想弄类似这样的悬停的边框颜色变化，两张图鼠标都是停在第二格，我自己做的第二格的右边会被第三格遮挡看原网页用的用的margin-left：-1px把盒子贴在一起的，不知道接...
想弄类似这样的悬停的边框颜色变化，两张图鼠标都是停在第二格，我自己做的第二格的右边会被第三格遮挡看原网页用的用的margin-left：-1px把盒子贴在一起的，不知道接下来怎么操作，望大神解救
展开
1个回答
展开全部
<!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>
这样样子并不会盖住呀！
追问
但是按您提供的代码这样弄的话，比如您设置了2px；中间在鼠标悬停之前看起来是4px的，我想要的是在悬停之前看起来也是2px这样的，我看x宝的就是这样弄的
追答
审查一下元素呗！看看X宝是怎么弄的！我看你给的图，这不知是设置了边框。貌似还设置了阴影之类的，如果再利用position这个hover状态的div的z-index高一些，就能达到这个效果了！
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
