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

Question

我在淡入淡出时创建了一个图像框，边框通过过渡淡化为红色。 当您将鼠标从 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>

http://jsfiddle.net/4fgnd/1112/

Answer 1

将过渡属性放在元素的块中，而不是 :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;
}

JSFiddle

Answer 2

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

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