ホバースライドショーのときだけ矢印を表示する方法html css javascript

マウスを画像に置いたときにのみ矢印を表示しようとしています。ホバースライドショーのときだけ矢印を表示する方法html css javascript

これは、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>

出典

2016-08-26 user6642297

はあなたのANS、非常に多くの@Jaromanda Xをありがとう問題を解決しました。ここで私はあなたの答えを使用しました： – user6642297

\t \t \t

\t \t \t \t Next

– user6642297

このコードを追加すると、問題を修正する必要があります。

.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*/; 
}

出典

2016-08-26 01:09:51

*ホバリング*でのCSSのトリックがあります。**質問に** .prev：hover'と '.next：hover'のような意味があります** - 私はあなたが誤解したと思います何が実際に質問 –

あなたは、画像の上にマウスを移動するときの矢印を表示させたい場合は - 一つの方法を以下のようにCSSを持つことである（私は純粋なテキストとして画像や矢印をアップdummiedましたが、校長は同じまま）

.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

出典

2016-08-26 01:14:18

これは私の答え+1 upvoteによく説明された代替です。 –

ホバースライドショーのときだけ矢印を表示する方法html css javascript

答えて

関連する問題