0

ユーザーが画像をクリックすると別のページに移動しますが、試みたすべてが機能するためトランジションを台無しにすることはありませんが、トランジションを削除するか、画像の1つを非表示にします

html

<div class="box1"> 
<img class="bottom" src="images/eventbox2.png"/>
<img class="top" src="images/eventbox.png"/>
</div>

CSS

.box1 {
  width:430px;
  height:450px;
}


#imagetrans {
  position:relative;
  margin:0 auto;
}

#imagetrans img.top:hover,
#container > div img.top:hover {
  opacity:0;
  margin:0 auto;
}

#imagetrans img,
#container > div img {
  position:absolute;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

何か案は？

4

1 に答える 1

2

CSSに「a」を追加してみましたか

#imagetrans img,
#container > div img a {
    position:absolute;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
于 2013-04-02T17:31:26.023 に答える