Question

当我们执行鼠标操作时，此代码将在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;
}

demo

Answer 1

不确定这是否是您正在寻找的东西，但现在就去了。诀窍是将隐藏的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/

用css悬停效果

1 个答案: