3

テキストが含まれて<span>いるので、その上にカーソルを合わせると、画像がページを下にスライドします。ここまでは順調ですね。ただし、誤ってマウスを画像の上に置いた場合、アニメーションは停止します。私はそれを望んでいません。

.coffee {
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
    z-index: 10;
}
.coffee:hover {
    color: #B88A00;
}
.coffee img {
    position: absolute;
    display: block;
    height: 100px;
    width: 100px;
    z-index: 1;
    left: 280px;
    top: 50px;
    opacity: 0;
    -webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.coffee:hover img {
    top: 150px;
    opacity: 1;
}

どんな助けでも大歓迎です。

4

2 に答える 2

1

私が理解しているように、それはあなたが望むかもしれません。このように書いてください:

HTML

<span class="coffee"><u>coffee</u></span>!
<img src="image.jpg" alt="Coffee!"/>

CSS

.coffee:hover + img{
    top: 150px;
    opacity: 1;
}

これをチェックしてくださいhttp://jsfiddle.net/quLKb/2/

于 2012-09-20T11:41:19.413 に答える
0

pointer-events属性を使用できます。noneに設定すると、そのcss-ruleが適用されている要素でマウスイベントが省略されます。

.coffee img {
  pointer-events: none;
}

変更された例は次のとおりです:http://jsfiddle.net/kFd9g/

于 2012-09-21T20:57:50.630 に答える