Html 使边框和箭头在悬停时更改颜色

我已经创建了一个图像框，在淡入淡出时，边框会随着过渡淡入红色。 当您将鼠标从div上移开时，如何使其褪色回原始颜色？它当前会回退，并且不会使用转换进行回退

此外，我还创建了一个箭头，我想把它放在右边的图像上。这需要以与将鼠标悬停在图像上时边框相同的方式淡入淡出，以便边框和三角形一起淡入淡出

我对编码还是相当陌生，所以如果这不合理，我深表歉意

CSS

.image {
position:relative;
width:200px;
height:200px;
border: solid 5px #3b3e40;
}
.image:hover {
border:solid 5px #ff0000;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image img {
width:100%;
vertical-align:top;
}
.arrow-left {
width: 0; 
height: 0; 
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;  
border-right:25px solid #3b3e40; 
}
.arrow-left:hover {
width: 0; 
height: 0; 
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;  
border-right:25px solid #ff0000;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

HTML

<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
<div class="arrow-left"></div>
</div>

<hr>

<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
<div class="arrowcontainer">
    <div class="arrow-left"></div>
</div>
</div>

---

将转换属性放置在元素的块中，而不是

：hover

伪选择器：

.image {
    position:relative;
    width:200px;
    height:200px;
    border: solid 5px #3b3e40;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

在图像悬停时更改箭头，而不是更改其本身：

.image:hover .arrow-left {
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;  
    border-right:25px solid #ff0000;
}

---

我会尝试悬停时向左的箭头，而不是独立的箭头

.image:hover.向左箭头{
宽度：0；
身高：0；
边框顶部：25px实心透明；
边框底部：25px实心透明；

右边框：25px实心#ff0000；}

谢谢乔治-这就是我要找的。我现在只需要将箭头覆盖在图像右侧的图像上，有什么想法吗？是的，使用

position:absolute

，同时更改

top

和

left

属性。看，谢谢你，这正是我希望创造的！