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

Question

I have created an image box when on fade, the border fades to red with a transition. How do I make it fade back to the original colour when you move the mouse off of the div? It currently snaps back and doesn't do it with a transition.

Also, I have created an arrow which I would like placing over the image on the right hand side. This needs to fade in the same way the border does when you hover over the image so that border & triangle both fade together.

I am still fairly new to coding so apologies if this doesn't make sense.

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

Place the transition properties in the block for the element, not the :hover pseudo selector:

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

Have the arrow change when the image is hovered, not itself:

.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;}