停止跨越整个滚动文本

我有一个滚动条与多个图像，打开一个新的链接，当每个图像被点击。在悬停时，我已将其设置为“灰色”并显示文本。停止跨越整个滚动文本

我不能让文本只弹出它是专为单个图像，所有的图像文字，只要你将鼠标悬停在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><!--

如果任何人都可以计算出如何使文本只出现在特定的形象，这将是伟大的。谢谢！

来源

2016-12-15 burgoyne

设置，当你在任何地方悬停在DIV这些文本显示悬停在DIV作用所以这是你的。将#scroll：hover替换为：hover .text {visibility：visible; } –

根据你的小提琴，你需要为锚标记设置位置和相对高度设置。并设置display：table-cell。所以对于图像，你不需要vertical-align：top来防止出现空白。我删除了滚动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>

来源

2016-12-15 23:12:55

这太棒了，谢谢！唯一没有工作的是设置我正在弄清楚的图像不透明度。再次谢谢你！ – burgoyne

已更新a：悬停到图像：悬停 –

是的，那是我所做的修复它。谢谢。与此相关的一个问题是，现在当我将图像悬停时，它会消失并显示文本，但是如果我的鼠标悬停在文本上，图像不会褪色。有没有快速解决这个问题？ – burgoyne

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

接下来，您的图像分解为单独的div并指定每个类=“滚动”，而不是一个大的div id为“滚动”

看到这js fiddle

来源

2016-12-15 21:34:09

但是，然后图像不是像我需要它们那样的水平滚动。但是我一定会关闭标签。 – burgoyne

停止跨越整个滚动文本

回答

相关问题