Question

基本上我试图让图像消失并显示超链接列表。在我意识到我的顶级图像从未真正消失之前，我以为我已将所有内容排序，因此我的所有超链接都不会被点击。

＆＃13;

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

#textdiv_violet {
  position: absolute;
  top: 160px;
  left: 64px;
  width: 200px;
  height: 200px;
}

#textdiv_violet img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

#textdiv_violet img:hover {
  opacity: .1;
  -webkit-transition: opacity .2s ease-out;
     -moz-transition: opacity .2s ease-out;
       -o-transition: opacity .2s ease-out;
          transition: opacity .2s ease-out;
}

＆＃13;

<div class="container">
  <div id="textdiv_violet">
    <ul>
      <li><a href="http://www.google.com">I will be violet links</a></li>
      <li><a href="http://www.google.com">Me too</a></li>
      <li><a href="http://www.google.com">And me</a></li>
    </ul>
    <img src="myimage.jpg" alt="">
  </div>
</div>

＆＃13;

我尝试将display: none添加到我的CSS中，但这会导致图像闪烁，因为鼠标在区域内移动，而不是像我希望的那样消失。如果可能，希望获得CSS或HTML解决方案。此外，这个设置的设计几乎完全适用于IE8。如果相关，则此代码将在页面周围的其他5个区域中复制。

请将您的答案发布为与拉布拉多对话？我没有编码，我刚刚接到了我想要完成的任务，虽然理想情况下我应该自学CSS和/或HTML，但遗憾的是我还没有给出是时候这样做了。此外，如果代码看起来很笨拙，我会道歉，我已经从基础知识/论坛/教程/试用版和错误！

Answer 1

很遗憾，您无法将transition与图片的display属性结合使用。但是，您可以转换其保证金。在短暂延迟（在此期间将margin-left调整为0）之后调整图像的opacity属性应该可以解决问题：

#textdiv_violet:hover img {
  opacity: 0;
  margin-left: -999em;
  transition: opacity .2s ease-in-out, margin-left 0s linear .2s;
}

这是一个CodePen来说明：http://codepen.io/anon/pen/PzZpmx

Answer 2

他的意思是这样的我添加了一个动画transition，当悬停链接的图片出现时

DEMO HERE https://jsfiddle.net/381e8wng/

Answer 3

@ SimianAngel的答案是好的工作！但也许你想玩z-index属性！它可以防止图像的不透明度为0 并保持水印效果

只需修改你的css：

     .container { 
        position: relative; 
        width: 400px; 
        height: 400px;
     }

     #textdiv_violet{ 
         position: absolute; 
         top: 160px; 
         left: 64px;
         width: 200px; 
         height: 200px;
     }

     #textdiv_violet:hover img{ 
        opacity: .1; 
        z-index:2;
        transition: z-index .4s ease-out ,  opacity .4s ease-out; 
     }

     #textdiv_violet ul {
        position: relative; 
        z-index: 4
     }

     #textdiv_violet img { 
        position: absolute; 
        top: 0px; 
        left: 0px; 
        width: 200px;
        height: 200px; 
        z-index: 6;
     }

这是一个演示： https://codepen.io/Carr1005/pen/jAxBzE

隐藏在图像下方的超链接列表

3 个答案: