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规则中指定所需内容，例如：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

关于图像上的灰色，您可以在悬停时为图像添加不透明度（＆＃34;不透明度：0.5＆＃34;），如果需要，可以在事件和＆＃34之间进行一些转换。 ;灰暗＆＃34;转换：0.5s＆＃34;左右。

关于文字叠加的问题，我认为你应该访问这个答案：Text on image mouseover?

Answer 3

您可以使用名为

的类放置文本

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

然后你可以用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;
  }

我希望这会有所帮助。

将鼠标悬停在滚动列表

3 个答案: