Question

我搜索了其他问题，但没有人提供我想要的结果。

我正在尝试：将鼠标悬停以显示另一个div并同时隐藏另一个div。我无法将所有div包装在一个父div中，因为那时我想要隐藏的div：悬停在上面会触发show / hide ...并且还可以通过一个很好的过渡进行。

只有当鼠标悬停在＆＃39;盘旋我时才会文本应该显示/隐藏触发器。

.remove_me课程和文字让我消失了＃39;并没有消失：悬停。这就是我无法实现的目标。

CSS

.hover_me {
    cursor:pointer;
    -webkit-transition: .4s;
    transition: .4s;
    display:block;
    height:30px;
    background:#ccc;
    width:70px;
    line-height:30px;
    text-align:center;
}
.show_me {
    display:none;
}
.hover_me:hover + .remove_me {
    display:none;
}
.hover_me:hover + .show_me {
    display:block;
}
.remove_me {
    display:block;

HTML

<div class="hover_me">hover me</div>
<div class="show_me">show me</div>
<div class="remove_me">make me disappear</div>

例如，不我想要发生的事情：http://jsfiddle.net/MBLZx/只有在“徘徊我”时才能触发显示/隐藏。文本

Answer 1

如果您按照this执行此操作，它应该按照您的意愿工作：

我改变了你的CSS代码

.hover_me:hover + .remove_me {
    display:none;
}

要：

//Note the tilde
.hover_me:hover ~ .remove_me {
    display:none;
}

Explanation on the tilde

希望这有帮助

Answer 2

我更改了您的选择器，并将显示（无法设置动画）更改为不透明度（可以）

.hover_me {
    cursor:pointer;
    -webkit-transition: .4s;
    transition: .4s;
    display:block;
    height:30px;
    background:red;
    width:70px;
    line-height:30px;
    text-align:center;
}
.show_me {
    opacity: 0;
}
.hover_me:hover ~ .remove_me {
    opacity: 0;
}
.hover_me:hover + .show_me {
    opacity: 1;
}
.remove_me {
    margin-top: -1em;
    opacity: 1;
}

div {
    transition: opacity 1s;
}

<div class="hover_me">hover me</div>
<div class="show_me">show me</div>
<div class="remove_me">make me disappear</div>

Answer 3

实际上要选择remove_me，您必须再应用+ show_me作为+。 + .show_me选择下一个标记类。所以我们必须把.hover_me:hover + .show_me + .remove_me { display:none; }置于

之间

var table = document.getElementById('myTableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

检查小提琴http://jsfiddle.net/stdeepak22/enmxx59b/

Answer 4

你需要......

使用常规相邻选择器~而非直接相邻选择器+以使.remove_me“消失”
使用opacity或您可以在转换时使用的任何其他属性（不是display）来创建显示/隐藏效果

按如下方式更改CSS：

.hover_me:hover ~ .remove_me{
    display:none;
}

Demo fiddle here

.hover_me {
    cursor:pointer;
    -webkit-transition: .4s;
    transition: .4s;
    display:block;
    height:30px;
    background:red;
    width:70px;
    line-height:30px;
    text-align:center;
}
.show_me {
    opacity: 0;
}
.hover_me:hover ~ .remove_me {
    opacity: 0;
}
.hover_me:hover ~ .show_me {
    opacity: 1;
}
.remove_me {
    opacity: 1;
}
.toggled{
    position: absolute;
    transition: opacity 300ms;
}

<div class="hover_me">hover me</div>
<div class="toggled show_me">show me</div>
<div class="toggled remove_me">make me disappear</div>

显示div并在转换时隐藏另一个

4 个答案: