CSS：懸停不能在css滑塊上工作

我試圖讓人們將鼠標懸停在它上面時，將這個純CSS滑塊的「上一個」和「下一個」箭頭「淡入」（或者當他們點擊移動版本中的箭頭時），因爲默認的深灰色箭頭在某些照片中顯示效果不佳。我已經準備好了深青色的圖像文件，所以這只是讓懸停和褪色的CSS動畫工作的問題。CSS：懸停不能在css滑塊上工作

這裏是具有滑塊的CSS網頁： http://melodywai.com/sodium.html

這裏是CSS樣式表的一個片斷，涉及到箭：

.carousel-wrapper { position: relative; } 

.carousel-wrapper .carousel-item { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
padding: 25px 50px; 
opacity: 0; 
transition: all 0.5s ease-in-out; 
height: 500px; 
width: 750px; 
margin-left: auto; 
margin-right: auto; 
} 

.carousel-wrapper .carousel-item .arrow { 
position: absolute; 
top: 50%; 
display: block; 
width: 50px; 
height: 50px; 
background: url("../prev.png") no-repeat; 
z-index:999; 
} 

.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; } 

.carousel-wrapper .carousel-item .arrow.arrow-next { 
right: 0; 
-webkit-transform: rotate(180deg); 
transform: rotate(180deg); 
}

我在尋找的建議上類的目標，或者，如果由於某種原因，懸停真的無法在此滑塊上工作。

謝謝！

來源

2016-07-13 Melody

嘗試添加

.carousel-wrapper .carousel-item .arrow:hover{ 
    //do something 
    }

來源

2016-07-13 14:26:40 nitzanerman

你可以針對他們這種方式。

a.arrow.arrow-prev:hover { 

} 

a.arrow.arrow-next:hover { 

}

實現這一點，你必須用Photoshop設計的水鴨藍色箭頭和懸停改變箭頭容器的背景圖像，例如：

a.arrow.arrow-prev:hover { 
    transition: all 0.2s ease-in-out;     // to give the "fade-in" effect 
    background-image: url("arrow-teal-prev.png");  // to change the arrow img 
} 

a.arrow.arrow-next:hover { 
    transition: all 0.2s ease-in-out;     // to give the "fade-in" effect 
    background-image: url("arrow-teal-next.png");  // to change the arrow img 
}

這是一個簡單的解決方案，它的外觀具有過渡效果。

告訴我，如果這可以幫助你，或者你需要更多的建議

來源

2016-07-13 15:05:32 Nosferatu

CSS：懸停不能在css滑塊上工作

回答

相關問題