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 放在另一个里面。

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 回答