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

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

2 个答案: