在悬停状态下追踪吗？
在悬停状态下追踪吗？
提问于 2015-07-07 21:00:28
现在我有六个浮动电视，每个都有一个图像作为背景。每个div上有一个4.5px的边距，所以看起来有一个边框。我想使它，以便在悬停时，div的“边界”被跟踪/填充在不同的颜色。我该怎么做？
<div id="one" >
</div>
<div id="two" >
</div>
<div id="three" >
</div>
<div id="four" >
</div>
<div id="five" >
</div>
<div id="six" >
</div>下面是css：
#one,#two,#three,#four,#five,#six{
max-height:400px;
background-color: grey;
margin:4.5px;
height:60vh;
width:417px;
max-width:417px;
float:left;
background-size: cover;
opacity:.9;
text-align:center;
}
#one{
background-image:url('../images/1.jpg');
}
#two{
background-image:url('../images/2.jpg');
}
#three{
background-image:url('../images/3.jpg');
}
#four{
background-image:url('../images/4.jpg');
}
#five{
background-image:url('../images/5.jpg');
}
#six{
background-image:url('../images/6.jpg');
}
#one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover{
opacity:1;
box-shadow: 0 0 0 8px white;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2015-07-07 21:10:55
一种方法是使用svg元素而不是div来使用stroke-dashoffset和stroke-dasharray动画边框(笔画)。
http://jsfiddle.net/zLuercaa/
Stack Overflow用户
发布于 2015-07-07 21:03:25
制作
margin:0;，然后向每个div添加一个真正的边框。
border: 4px solid blue;然后:悬停，你可以改变边框的颜色。
Stack Overflow用户
发布于 2015-07-07 23:06:44
只需将transition-duration: 0.4s;或任何时间添加到div元素中即可。
body {
background-color: black;
}
#one,
#two,
#three,
#four,
#five,
#six {
background-image: url('http://lorempixel.com/400/300');
max-height: 400px;
background-color: grey;
margin: 4.5px;
height: 60vh;
width: 417px;
max-width: 417px;
float: left;
background-size: cover;
opacity: .9;
text-align: center;
transition-duration: 0.4s;
}
#one:hover,
#two:hover,
#three:hover,
#four:hover,
#five:hover,
#six:hover {
opacity: 1;
box-shadow: 0 0 0 8px white;
}<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31279164
复制相关文章
相似问题
腾讯云开发者
