Question

我正在创建一些图像，当你悬停它们时它们会在顶部显示一些文字，到目前为止一切都运行得很好但我现在遇到的问题是如何在盘旋h2时保持背景黑色..任何帮助都是非常感谢

这就是我所拥有的

<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

您只需添加规则来设置span上的h2:hover样式：

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

JS Fiddle demo

但是，您也可以轻松地将所有选择器替换为：

a:hover span img {
    visibility: hidden;
}

JS Fiddle demo

Answer 4

在鼠标悬停在visibility: hidden;上时，只需在img上添加a

<强> SEE THE DEMO HERE

a:hover span img 

{
    visibility: hidden;
}

悬停内部文本时<span>上的背景颜色</span>

4 个答案: