CSS:悬停不适用于 css slider

Question

我试图让这个纯 CSS slider 的“上一个”和“下一个”箭头在人们用鼠标悬停在它上面时(或者当他们点击移动版)，因为默认的深灰色箭头在某些照片中显示不佳。我已经准备好蓝绿色图像文件，所以只需要让悬停和淡入淡出的 css 动画起作用即可。

这是一个带有 css slider 的网页: 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);
}

我正在寻找关于目标类的建议，或者如果由于某种原因，悬停真的不能在这个 slider 上工作。

谢谢!

Answer 1

尝试添加

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