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/

Answer 2

试试这个：

<a  href="#">
  <h2 onmouseout="document.getElementById('123').style.backgroundColor='white';document.getElementById('456').style.visibility='visible';" onmouseover="document.getElementById('123').style.backgroundColor='#000';document.getElementById('456').style.visibility='hidden';">Some Text</h2>
  <span id='123'>
    <img id='456' src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/>
  </span>
</a>

Answer 3

您只需要添加一个规则来设置spanon样式h2:hover：

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

JS 小提琴演示。

但是您可以同样轻松地将所有这些选择器替换为：

a:hover span img {
    visibility: hidden;
}

JS 小提琴演示。

Answer 4

只需visibility: hidden;在img悬停时添加a

在这里查看演示

a:hover span img 

{
    visibility: hidden;
}