-1

私はいくつかの画像を作成しています。それらをホバーすると、テキストが上に表示されます。これまでのところ、すべてうまく機能しますが、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;}
4

4 に答える 4

2

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/

于 2013-10-20T13:28:45.160 に答える
1

ホバリングしながらvisibility: hidden;追加するだけimga

ここでデモを見る

a:hover span img 

{
    visibility: hidden;
}
于 2013-10-20T13:18:06.857 に答える