Question

我有一个包含多个图像的滚动条，在单击每个图像时会打开一个新链接。在悬停时，我将它设置为＆＃34;灰色＆＃34;和文字出现。

我无法将该文本仅显示在其设计的单个图像上，并且只要您将鼠标悬停在div的任何部分上，所有图像文本就会出现。

这是我用来解释的小提琴：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

根据你的小提琴你需要设置位置相对和设置锚标签的高度。并设置display：table-cell。所以对于图像你不需要垂直对齐：顶部以防止白色空间。我删除滚动div的高度。最重要的是你需要将悬停状态#scroll更改为锚标记（你可以创建任何类或使用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>

Answer 2

首先，请关闭您的锚标记<a href='foo'>bar</a>

接下来，将您的图片分成单独的div并为每个分配一个class ='scroll'而不是一个id ='scroll'的大div

请参阅此js fiddle

跨越整个滚动停止文字

2 个答案: