Question

现在我有六个浮动的div，每个都有一个图像作为背景。每个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;
}

Answer 1

一种方法是使用svg元素而不是div来使用stroke-dashoffset和stroke-dasharray设置边框（笔画）的动画。

<强> http://jsfiddle.net/zLuercaa/

Answer 2

请

margin:0;

然后为每个div添加一个真正的边框

border: 4px solid blue;

然后点亮：悬停您可以更改边框颜色。

Answer 3

只需将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>

跟踪div悬停？

3 个答案: