5

目標: 「アイテム」画像にカーソルを合わせると、「アイテム」画像 div の中央に「プレイ」画像が表示されるようにします。私は次のことをしました：

play.img は itemImage.img と重複しています

HTML:

<div class="itemsContainer">
  <img src="/images/G1.jpg"/>
  <div class="playy">
    <img src="/images/playy.png"/>
  </div>
</div>
<div class="itemsContainer">
  <img src="/images/B1.jpg"/>
  <div class="playy">
    <img src="/images/playy.png"/>
  </div>
</div>
<div class="clear">

CSS

.itemsContainer {
  float: left;
  width : 300px;
  height : 300px;
  margin-left : 2px;
}

.itemsContainer img {
  width : 300px;
  height : 175px;
  margin-bottom : -115px;
  z-index : -1;
}
.play img {
  position : relative;
  width : 50px;
  height : 50px;
  z-index : 100;
  margin : 0 0 50px 125px;
  opacity : 0.0 ;
} 

.itemsContainer img:hover {
  opacity : 0.8;
}

上記のコードでは、div.play にカーソルを合わせたときにのみ「再生」画像が表示されますが、.itemContainer.img にカーソルを合わせたときに「再生」画像が表示されるようにします。

itemImage.imgにカーソルを合わせて「再生」画像を表示するにはどうすればよいですか??

参照: http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css

何らかの理由で「a」タグを使用したくないのですが、何が間違っているのか知りたいですか？

http://jsfiddle.net/e6Lav/5/   -- Problem
http://jsfiddle.net/2uJKR/11/  -- Solution
4

2 に答える 2

20

これを試して

HTML

<div class="itemsContainer">
    <div class="image"> <a href="#">  <img src="#" /> </a></div>
    <div class="play"><img src="#" /> </div>
</div>

CSS

.itemsContainer {
    background:red; 
    float:left;
    position:relative
}
.itemsContainer:hover .play{display:block}
.play{
  position : absolute;
    display:none;
    top:20%; 
    width:40px;
    margin:0 auto; left:0px;
    right:0px;
    z-index:100
}

デモ

于 2013-02-15T06:00:41.603 に答える
1

CSS は問題ありませんが、この HTML の方が優れている可能性があります

<div class="itemsContainer"> <a href=""><img src=""/></a> <div class="play"> <a href=""><img src="" /></a> </div> </div>

これは、再生ボタンもリンクにするのに役立ちます:)

于 2014-03-20T17:40:51.467 に答える