带有信息选项的图像堆叠悬停答案

【问题标题】：Image stacking with info options hover带有信息选项的图像堆叠悬停
【发布时间】：2016-03-14 05:52:26
【问题描述】：

基本上我有一个动态图像，顶部堆叠了另一个图像/“效果”。

那部分工作正常。

但是当我转到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>

【问题讨论】：

你想要一个逐渐显示的悬停效果而不是直接捕捉吗？

标签： html css image html-table

【解决方案1】：

这就是我认为您所要求的。这是悬停时的淡入。

注意我删除的更改

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>

【讨论】：