如何在悬停幻灯片html css javascript时显示箭头

Question

我只是在鼠标悬停在图像上时才显示箭头。

有没有办法可以在CSS，html或Javascript中完成。

任何帮助将不胜感激。

感谢。

else

Answer 1

如果你希望在悬停在图像上时出现箭头 - 一种方法是让css如下（我将图像和箭头作为纯文本，但主体保持不变）

＆＃13;

＆＃13;

.prev,
.next 
{
  opacity: 0;
  transition: opacity 800ms;
}

.outerBox:hover .prev,
.outerBox:hover .next
{
    opacity: 1.0;
}

＆＃13;

<div class="outerBox">

                <span class="prev">&lt;&lt;&lt;</span>
                <span>I am an image</span>
                <span class="next">;&gt;&gt;&gt;</span>
</div>

＆＃13;

＆＃13;

＆＃13;

我还添加了一个不透明度的过渡，因为我喜欢过渡：p

Answer 2

添加此代码，您的问题应该得到修复。

.prev, .next {
     visibility: hidden;
}
.prev:hover, .next:hover {
     visibility: hidden;
}

或者这段代码。

.prev, .next {
     color: /*whatever the background color is i.e. white*/;
}
.prev:hover, .next:hover {
     color: /*something contrasting from your background color i.e. black*/;
}