html - 悬停内部文本时 上的背景颜色

Question

我正在创建一些图像，当您将它们悬停时，它们会在顶部显示一些文本，到目前为止一切正常，但我现在遇到的问题是如何在悬停 h2 时保持背景黑色。任何帮助是非常感谢

在此处查看演示 http://jsfiddle.net/buNBm/2/

这是我的

<a href="#">
  <h2>Some Text</h2>
  <span>
    <img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/>
  </span>
</a>

和CSS

img {width:250px;}

a:hover h2 {display: block!important;}

a h2 { position: absolute; top:0 ; display: none; color: #fff;}

a span {display: inline-block;}

a:hover span {background: #000}

a span img:hover, a span:hover img {visibility: hidden;}

Answer 1

你可以简单地使用 h2 标签:

<a href="#">
  <h2>Some Text</h2>
  <img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/>
</a>

对于 CSS

a { position: relative; display: inline-block }

a img {
    width:250px;
}

a h2 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: black;
    color: #fff;
}

a:hover h2 {
    display: block;
}

在此处查看演示:http://jsfiddle.net/jiceb/xsFmA/