在懸停時製作邊框和箭頭更改顏色

在淡入淡出時，我創建了一個圖像框，邊框通過轉場淡入紅色。當您將鼠標移出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/

來源

2014-10-01 Aaron

放入塊中的過渡特性的元件，而不是: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

來源

2014-10-01 10:40:11 George

謝謝喬治 - 這是我正在尋找。我只需要將箭頭疊加到圖像右側的圖像上，對此有何想法？ – Aaron 2014-10-01 10:45:56

是的，使用'position：absolute'以及改變'top'和'left'屬性。請參閱[位置]（https://developer.mozilla.org/en-US/docs/Web/CSS/position） – George 2014-10-01 10:48:05

謝謝，這正是我希望創建的！ – Aaron 2014-10-01 11:02:16

我會嘗試的左箭頭上懸停，而不是獨立的。

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

來源

2014-10-01 10:50:29 ashjones86

在懸停時製作邊框和箭頭更改顏色

回答

相關問題