html - 如何在 CSS 中悬停时显示隐藏内容

Question

正如标题所说，我想在悬停图像时显示一个隐藏的跨度“框”，但我无法让它工作，所以我希望你们能找出我的错误。

HTML

<span class="DDAA__bg">
<h1 class="DDAA__headline"><a href="#">DANSK DYREVÆRN ÅRHUS</a></h1>
</span>
<span class="DDAA__pic">
<img src="img/DDAA-Logo.png" width="980" height="200"  alt="Dansk Dyreværn Århus"/>
</span>

CSS

span.DDAA__bg{
  height: 200px;
  width: 980px;
  background-color: #666;
  position: absolute;
  display: none;
}

span.DDAA__pic{
   display:block;
   visibility: visible;
}

span.DDAA__pic:hover{
   visibility: hidden;
   transition-delay: 2s;
}

span.DDAA__pic:hover + span.DDAA__bg{
   display:block;
}

你可以在这里看到它现在是如何工作的，不是那么好:/

http://jsfiddle.net/ary3bt83/3/

Answer 1

element:hover > other_element {
 display: block;
}

这等同于 jQuery 代码

 $(element).on('hover', function() { $(this).css("display", "block"); });

但是有时在 css 上做 hover 真的很麻烦...