3

のときにアイテムの上にカーソルを合わせると少し問題が発生しましたopacity: 0;が、 とは異なりdisplay: none;、アイテムはまだ空間に存在するため (表示されないだけです)、そのオブジェクトに関連付けられたホバー イベントは引き続き発生します。

私が使用しているコードを実際に投稿することはできませんが、それをシミュレートするためにもう少し説明を加えてフィドルを設定しました。注意点として、Javascript を使用して解決したくはありません。純粋な HTML/CSS を維持するようにしてください。また、以下のフィドルから HTML と CSS を投稿しました。

HTML:

<div class="container">
    <div class="secondary-container">
        .opacity-0 fills this box.
        <div class="opacity-0"></div>
        <div class="on-hover">Hello, world!</div>
    </div>
</div>

CSS:

body {
    font-family: sans-serif;
}

.container {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.container .secondary-container {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: white;
    padding: 5px;
    box-sizing: border-box;
}

.container .secondary-container .opacity-0 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: -41px;
    margin-left: -5px;
    opacity: 0;
}

.on-hover {
    display: none;
    color: white;
}

.container .secondary-container .opacity-0:hover ~ .on-hover {
    display: block;
}

そして説明：

白い四角にカーソルを合わせると、「Hello, world!」というテキストが表示されます。表示する必要があります (div.on-hover から)。ただし、CSS に明示的に記載されているように、実際には .opacity-0 にカーソルを合わせています。

.opacity-0 にホバーできるようにする必要があります。不透明度が 0 の場合 (つまり、オブジェクトは表示されませんが、スペースに存在する場合)、ホバー イベントは発生しません。opacity が 1 の場合、.opacity-0 にカーソルを合わせると、通常どおりホバー イベントが実行されます。できれば Javascript は使用しないでください。

私がこれを驚くほどうまく説明していない可能性があることに気付いたので、それについての質問に喜んで答えてください。

助けてくれてありがとう:)

4

3 に答える 3

3

http://jsfiddle.net/QwDwj/2/に置き換えopacity:0;てみてくださいvisibility:hidden;

于 2013-02-14T16:05:18.433 に答える
2

私はそれを解決しました:)まず、CSS3トランジションでフェードインするにはボックスが必要であることをOPで言及するのを忘れていたと言わなければなりません-申し訳ありません。

を使用visibility:hidden;すると、トランジションで奇妙なことが行われたので、可視性と不透明性の両方を使用しました。これにより両方が遷移しますが、不透明度が明らかに優先されるため、可視性の遷移の問題は発生しなくなります。助けてくれてありがとう！

于 2013-02-14T16:10:18.867 に答える
0

これがうまくいくかどうかはわかりません。要素をホバーすると、ホバースタイルが使用されます。CSSはプログラミング言語ではないことを忘れないでください。

必要に応じてJavaScriptを使用してみませんか？jQueryには、フェード表示の最後に要素を設定するfadeOutメソッドがあると確信しています：none。

または、display：noneを使用して、レイアウトを維持するためにdivを高さ/幅が固定されたdivに配置しますか？

必要に応じてフィドルを追加できます。

于 2013-02-14T15:43:31.033 に答える