Question

基本上我有一个动态图像，堆叠了另一个图像/＆＃34;效果＆＃34;在上面。

那部分工作正常。

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

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

图像堆叠与信息选项悬停

1 个答案: