スクロール全体にテキストが表示されないようにする

Question

複数の画像を含むスクロールバーがあり、各画像をクリックすると新しいリンクが開きます。マウスを動かすと、「グレーアウト」に設定され、テキストが表示されます。

私はそのテキストが、それが設計されている単一の画像にのみポップアップするようにすることはできません。また、divの任意の部分にカーソルを合わせるとすぐにすべての画像テキストが表示されます。誰もがテキストのみの特定に表示されるようにする方法を見つけ出すことができれば

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

#scroll { 
    height: 25%; 
    overflow-x: scroll;  
    white-space: nowrap; 
    width: 50%; 
} 

#scroll img { 
    height: 100%; 
    vertical-align: top; /* this prevents vertical whitespace */ 
} 

#scroll img:hover { 
    opacity: .3; 
} 

#scroll .text { 
position:absolute; 
visibility:hidden; 
} 

#scroll:hover .text { 
visibility:visible; 
} 

HTML

<div id="scroll"> 
    <a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" class="hover"/><p class="text">Lake</p><!-- 

：https://jsfiddle.net/burgoyne/u1zdn80p/

CSS：ここ

は、私が説明して作られたバイオリンですイメージ、それは素晴らしいでしょう。ありがとう！

Answer 1

あなたのフィドルによれば、アンカータグの相対的な位置と高さを設定する必要があります。 display：table-cellを設定します。だからイメージのために、その垂直方向の整列が必要ない：白いスペースを防ぐためにトップ。私はスクロールdivの高さを削除します。そして、最も重要なのは、ホバー状態を#scrollをアンカータグに変更する必要があることです（クラスを作るか、CSSセレクターを使用することができます）。ここにはFiddleがあり、変更されたCSS部分を確認します。あなたはどこにでもそれらのテキスト・ショーのdivに置くと、それはあなたですので、div要素に影響を置く設定

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#scroll { 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
    width: 50%; 
 
} 
 

 
#scroll a { 
 
    text-decoration: none; 
 
    display: table-cell;/* this prevents vertical whitespace */ 
 
    height: 100px; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
#scroll a .hover { 
 
    height: 100%; 
 
    
 
} 
 

 
a:hover{ 
 
    opacity: .3; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    color: black; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
a:hover .text { 
 
    visibility: visible; 
 
    top: 0; z-index:4; 
 
    margin-top: 41px; 
 
margin-bottom: 41px; 
 
    
 
}

<div id="scroll"> 
 
    
 

 
<a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" class="hover" /> 
 
    <p class="text">Lake</p> 
 
    </a> 
 
    <a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" class="hover" /> 
 
    <p class="text">Sunset</p> 
 
    </a> 
 
    <a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" class="hover" /> 
 
    <p class="text">Garden</p> 
 
    </a> 
 
    <a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" class="hover" /> 
 
    <p class="text">Desert</p> 
 
    </a> 
 
</div>

Answer 2

まず第一には、あなたのアンカータグ閉じてください<a href='foo'>bar</a>

次に、別のdivタグの中にあなたのイメージを分離して割り当て、各クラス=

がこれを見る「スクロール」= idを持つ代わりに一つの大きなdivの「スクロール」 js fiddle