0

このコードは、マウス オーバーを行うと、div に点滅を出力します。私が欲しいのは、マウスが赤い div の上にあるときに非表示の div の内容を表示することです。しかし、「フラッシュ」では、効果が適切に機能しませんでした。

それについて何か考えはありますか？

<div class="content">
     <div class="absolute"></div>
     <div class="new_l"><a href="#">---links</a></div>
</div>

.content {
    width: 195px;
    margin-top: 15px;
    border:1px solid red;
}

.content>.new_l {
    width: 195px;
    height: 20px;
    z-index: 0;
    position: relative;
    display: inline-block;
}

.content>.absolute {
    width: 195px;
    height: 20px;
    position: absolute;
    z-index: 1;
    background-color: red;
    display: inline-block;
}

.content>.absolute:hover {
    display: none;
}

デモ

4

1 に答える 1

2

これがあなたが探しているものかどうかはわかりませんが、ここにあります。秘訣は、非表示の div を他の div の中に入れることです。

HTML

<div class="content">
    <div class="absolute">
        <div class="new_l"><a href="#">---links</a></div>
    </div>
</div>

CSS

.content {
    width: 195px;
    margin-top: 15px;
    border:1px solid red;
}

.new_l {
    width: 195px;
    height: 20px;
    background-color: #ccc;
    display:none;
}

.absolute {
    width: 195px;
    height: 20px;
    background-color: red;
}

.absolute:hover .new_l {
    display: block;
}​

http://jsfiddle.net/uFsUa/1/

于 2012-04-10T03:01:20.167 に答える