如何僅在懸停幻燈片 html css javascript 時顯示箭頭

Question

我試圖僅當鼠標懸停在圖像上時才顯示箭頭。

有什么辦法可以在 CSS、html 或 Javascript 中完成。

任何幫助將不勝感激。

謝謝。

<html>
<style>
.prev {
    opacity: 0;
    position: absolute;
    top: 34%;
    left: 0;
}

.prev:hover {
    opacity: 1.0;
}

.next {
    opacity: 0;
    position: absolute;
    top: 34%;
    right: 0;
}

.next:hover {
    opacity: 1.0;
}

</style>

<body>
<div class="outerBox">

                <img src="SliderLeftArrow.svg" alt ="Prev" class = "prev" /> 

                <img src="SliderRightArrow.svg" alt ="Next" class = "next"/>

                <img src="image1.jpg" class="imageBox" id="image_slider" />
</div>
</body>
</html>

Answer 1

如果您希望在將鼠標懸停在圖像上時出現箭頭 - 一種方法是使用 css 如下（我已經將圖像和箭頭作為純文本進行了虛擬化，但主要內容保持不變）

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

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

我還為不透明度添加了過渡，因為我喜歡過渡：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*/;
}

如何僅在懸停幻燈片 html css javascript 時顯示箭頭

問題描述

2 個解決方案

解決方案1
3 已采納 2016-08-26 01:14:18

解決方案2
1 2016-08-26 01:09:51

如何僅在懸停幻燈片 html css javascript 時顯示箭頭

問題描述

2 個解決方案

解決方案1 3 已采納 2016-08-26 01:14:18

解決方案2 1 2016-08-26 01:09:51

解決方案1
3 已采納 2016-08-26 01:14:18

解決方案2
1 2016-08-26 01:09:51