html - 阻止文本跨越整个滚动条

Question

我有一个包含多个图像的滚动条，当单击每个图像时会打开一个新链接。悬停时，我将其设置为“灰色”并出现文本。

我无法让该文本仅在为其设计的单个图像上弹出，并且当您将鼠标悬停在 div 的任何部分上时，所有图像文本都会立即出现。

这是我用来解释的 fiddle :https://jsfiddle.net/burgoyne/u1zdn80p/

CSS:

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

如果有人能弄清楚如何使文本仅出现在特定图像上，那就太好了。谢谢!

Answer 1

根据您的 fiddle ，您需要设置相对位置并设置 anchor 标记的高度。并设置显示:表格单元格。因此，对于图像，您不需要 vertical-align:top 来防止出现空白。我删除了滚动 div 的高度。最重要的是，您需要将悬停状态 #scroll 更改为 anchor 标记(您可以创建任何类或为此使用 css 选择器)。这是一个Fiddle检查修改后的 CSS 部分。

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>