將鼠標懸停在滾動列表中的圖片上

Question

我在水平滾動條中顯示圖片，我希望能夠將鼠標懸停在每張圖片上，而當我這樣做時，我希望圖片稍微「變灰」，並且上面有文字。

我不能爲我的生活弄清楚如何去做。

我讓這個小提琴展示了我的滾動條的樣子。 https://jsfiddle.net/burgoyne/u1zdn80p/1/

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

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

有人能指出我在這裏向正確的方向？我一直在用CSS來嘗試不同的東西，將它變灰並添加文本，但沒有運氣。

謝謝！

Answer 1

你必須指定你想要在一個CSS img:hover規則，就像這樣：

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: .5; 
 
}

<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" /><!-- 
 
    --><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!-- 
 
    --><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!-- 
 
    --><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" /> 
 
</div>

Answer 2

關於灰色在圖像上，你可以添加不透明度到圖像上懸停（「不透明度：0.5」），如果需要，可以在事件和「灰度」之間進行一些轉換，以「轉換：0.5秒」左右。

關於與文本疊加的問題，我想你應該訪問這個答案：Text on image mouseover?

Answer 3

你可以把文本里面有一個名爲

<span class="text-content"><span>Some text here</span></span> 

類，然後u可以使用CSS來對放置文本圖像，像...

span.text-content 
    { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 150px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    } 

    span.text-content span 
    { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    } 

我希望這可以幫助。