基本上我有一个动态图像，上面有另一个图像/“效果”的堆叠。
那部分工作正常。
但是当我转到 span:hover + div 组合图像顶部的用户选项区域时，它主要与悬停效果一起使用，但悬停元素似乎在鼠标悬停时闪烁。
<!DOCTYPE html>
<html>
<head>
<style>
.stack {
position: absolute;
left: 5px;
top: 5px;
width: 100px;
height: 100px;
z-index: -2;
}
div {
width: 110px;
height: 110px;
align-items: center;
top: 5px;
display: none;
}
span:hover + div {
display: block;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td class='#jail' style='position:relative'>
<span><img src='/{$ir['display_pic']}' class='stack'>
<img src='/overlay.png' class='stack'>
</span>
<div>
<center>
<a href='http://'>Option 1</a>
<br />
<a href='http://'>Option 2</a>
</center>
</div>
</td>
</tr>
</table>
</body>
</html>
最佳答案
这就是我认为您的要求。这是悬停时的淡入。
注意我删除的更改
span:hover + div {
display: block;
}
并将其替换为类 .hovered 和 .hovered:hover
希望对您有所帮助，
蒂姆
.stack {
position: absolute;
left: 5px;
top: 5px;
width: 100px;
height: 100px;
z-index: -2;
}
.hovered {
width: 110px;
height: 110px;
align-items: center;
top: 5px;
display:block;
opacity: 0;
}
.hovered:hover {
opacity: 1;
transition: opacity 0.5s ease-in; /* vendorless fallback */
-o-transition: opacity 0.5s ease-in; /* Opera */
-ms-transition: opacity 0.5s ease-in; /* IE 10 */
-moz-transition: opacity 0.5s ease-in; /* Firefox */
-webkit-transition: opacity 0.5s ease-in; /* Safari & Chrome */
}<table border="0">
<tr>
<td class='#jail' style='position:relative'>
<span><img src='<img src="http://placehold.it/350x150/ff0000">' class='stack'>
<img src='<img src="http://placehold.it/350x150/00ff00">' class='stack'>
</span>
<div class="hovered">
<center>
<a href='http://'>Option 1</a>
<br />
<a href='http://'>Option 2</a>
</center>
</div>
</td>
</tr>
</table>关于html - 带有信息选项悬停的图像堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35971295/