悬停时跟踪div？答案

【问题标题】：Trace div on hover?悬停时跟踪div？
【发布时间】：2018-09-25 15:52:01
【问题描述】：

现在我有六个浮动 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;
}

【问题讨论】：

您要创建动画边框吗？
是的！我希望它是动画的
那么哪个答案最能解决您的问题？你还没有选择一个。

标签： javascript html css

【解决方案1】：

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

http://jsfiddle.net/zLuercaa/

【讨论】：

这看起来很棒，但我以前从未使用过 svgs，是否可以用图像替换文本？

【解决方案2】：

制作

margin:0;

然后给每个div添加一个真实的边框

border: 4px solid blue;

然后在 :hover 上可以更改边框颜色。

【讨论】：

【解决方案3】：

只需将transition-duration: 0.4s; 或您想要的任何时间添加到您的divelements。

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>

【讨论】：