css：悬停时出现背景色块/javascript:fadein&；从背景色块中删除

从3个星期以来，我一直在努力工作，现在，我打算添加一个背景色块（外部和内部），并使用javascript实现fadein&out效果

所以首先，我想创建背景边框，我想在我的一张图片上悬停时显示它，但我被卡在这里了。我想如果我加上如下内容：

.saintemarie{
border: 20px solid #FFF;
left:700px;
top:500px;
overflow:hidden;
display:none;
}

它实际上弄乱了我的页面，删除了我所有的图片

函数mouseOver（）{
var divs=document.getElementsByClassName（'lycee'）；
对于（变量i=0；i

.college.image{
左：100px；
顶部：475px；
位置：绝对位置
}
.学院：悬停，图像优先{
不透明度：0.2；
利润率：20px；
边框：20px实心透明；
过渡：边框颜色2s；
}
.莱西.斯潘第三：：之前{
内容：''；
位置：绝对位置；
顶部：-20px；
左：-20px；
右：-20px；
底部：-20px；
边框：20px纯红；
不透明度：0；
过渡：不透明度2s；
}
.lycee.spanthird:悬停：：之前{
不透明度：1
}
.莱西.斯潘第三次：：之后{
内容：''；
位置：绝对位置；
最高：50%；
左：0；
右：0；
底部：0；
不透明度：0；
背景：rgba（0,0,255,0.5）；
/*半透明红*/
过渡：不透明度2s；
}
.lycee.spanthird:悬停：：之后{
不透明度：1；
}
莱西，斯潘第三{
位置：相对位置；
}
.大学.第二{
宽度：550px；
高度：900px；
转换：转换（-110px，500px）；
转换：转换0.3s缓进输出0.1s；
边界半径：8px；
溢出：隐藏；
}
.college:hover>.imagesecond{
转换：转换（-110px，-500px）；
}
.lycee.图像{
左：700px；
顶部：500px；
位置：绝对位置
}
莱西，第四{
宽度：537px；
高度：600px；
转换：转换（-160px，500px）；
转换：转换20秒轻松输入输出0.1秒；
边界半径：8px；
溢出：隐藏；
}
.lycee:hover>.imagefourth{
转换：转换（-160px，-325px）；
}
.编队.图像{
左：1250px；
顶部：510px；
位置：绝对位置；
}
.编队{
宽度：550px；
高度：900px；
转换：转换（-100px，400px）；
转换：转换0.3s缓进输出0.1s；
边界半径：8px；
溢出：隐藏
}
.formations:hover>.imagesixth{
转换：转换（-173px，-600px）；
}
身体{
背景：url（“http://via.placeholder.com/350x150）33em 0%固定无重复；
位置：固定；
背景色：rgb（0,85,170）；
}

圣玛丽

淡化边框非常简单，下面是一个可以应用于代码的示例

为了在悬停时不使图像反弹，已应用透明边框，悬停时它将淡入红色

img{
利润率：20px；
边框：20px实心透明；
过渡：边框颜色2s；
}
img：悬停{
边框颜色：红色；
}

---

如果允许，您可以使用CSS解决方案

*{
框大小：边框框；
}
img：悬停{
动画：后退1秒，轻松前进；
}
@关键帧顺序{
0% {
边框：中等实体rgba（255,0,0,0）；
}
50% {
边框：中等实心rgba（255,0,0,5）；
}
100% {
边框：中等实体rgba（255,0,0,1）；
}
}

我是否可以使边框不仅是红色的，而且也在边框内部？我可能解释错了，但当我说背景色边框时，它更像是一个彩色块，我可以改变大小和位置，只要它不会弄乱我的颜色page@souzouker我添加了第二个示例，您可以根据需要对其进行着色，这样做时，可以使用绝对定位，它不会影响周围的元素！现在我很好奇，有没有可能把高度特别改成半透明的红色？比如说如果我想一直坚持下去？改变他的尺寸，但不改变图像的尺寸？@souzouker Yes，将使用另一个添加一个样本pseudo@souzouker更新了我的第二个示例，展示了如何产生两种不同的效果，每种效果各有一个伪效果。