3

ネストされた div 要素での ccs3 ホバー トランジションに問題があります。MOUSE_OVER img_cover するとアニメーションが再生されるようですが、マウスを img_one コンテナー内の何かの上に移動すると、親 div にまだいるにもかかわらずMOUSE_OUTアニメーションの再生が開始されます。これは望ましくない効果です。親の div (img_one コンテナー) から移動するときにMOUSE_OUTを再生したいだけです。私は何を間違っていますか？

デモ用に Jsfiddle を作成しました。

http://jsfiddle.net/6wrdD/16/

---------------------------
| img_one  container      |
|  ____________________   |
|  |kool_mask         |   |
|  |------------------|   |   
|  |text              |   |
|  |button            |   |
|  |__________________|   |
|                         |
|  ____________________   |
|  |img_cover         |   |
|  |__________________|   |
---------------------------

コード: [HTML]

<div class="image_one">

    <div class="kool_mask">
        <h5> Heading </h5>
        <div class="p2"> Text </div>

        <a href="#"><input type="button" id="kool_buttons" value="launch">  </a>

    </div>
<div id="imgcover"> <img src="http://blogs.lib.utexas.edu/texlibris/files/HAL-9000.jpg" alt="" /> </div>
</div>

コード: [CSS]

.kool_mask 

{
background: rgba(66, 72, 71, 0.7);

position:relative;
width:288px;
height:250px;

top:0;
left:0;
}

.image_one
 {
position:relative;
width:288px;
height:250px;



}

.kool_mask a 
{

color:#ffffff;
}


#imgcover
{
top:0;
left:0;
position:absolute;
width:288px;
height:150px;

 -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;


}

#imgcover:hover
{

-webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;

  /* Firefox */

-moz-transform: scale(0) rotate(320deg) translate(50px);

/* WebKit */

-webkit-transform: scale(0) rotate(320deg) translate(50px);

/* Opera */

-o-transform: scale(0) rotate(320deg) translate(50px);

/* Standard */

transform: scale(0) rotate(320deg) translate(50px);

}

h5 
{
font-size: 16px;
color: #FFFF00;
text-align:center;
background-color: #000000;
margin-right: 470px;
margin-left: 100px;
padding-top: 2px;
padding-left: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;

}


.kool_buttons {
text-align:center;
width:50px;
height:50px;
border:1px solid black:

background: rgba(66, 72, 71, 0.7);


}​
​
4

1 に答える 1

4

#imgcover:hoverセレクターを.image_one:hover #imgcover次のように変更するだけです。

.image_one:hover #imgcover
{

-webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
...

http://jsfiddle.net/Kyle_/6wrdD/17/

これにより、親要素にカーソルを合わせたときに画像が選択されるため、トリガー要素は親のみであり、画像自体ではなく、画像をアニメーション化します。:)

于 2012-09-26T06:42:12.727 に答える