Question

我一直在努力解决这个问题很长一段时间，我似乎无法得到它。我有以下HTML：

<div class="b">
    <button>Show when I hover</button>
</div>
<div class="A">When I hover over this the background should change</div>

使用相应的CSS：

.b {
    float: right;
    display: none;
}
.A {
    float: left;
    display: inline;
    width: 1000px;
}

.A:hover {
    background: gray;
}

.A:hover + .b {
    display: block;
}

我想要做的是每当我将鼠标悬停在A b div上时，应显示相应的按钮。另外，我想要它，当我的鼠标在按钮上时，A的背景仍然是灰色的，就好像我在它上面盘旋一样。我似乎无法弄清楚这一点。有什么想法吗？

相关的JSFiddle：http://jsfiddle.net/sn19k1wz/3/

Answer 1

您可以通过更改A和B

的位置来执行此操作

<div class="A">When I hover over this the background should change</div>
<div class="b">
    <button>Show when I hover</button>
</div>

Answer 2

更改div位置，悬停div标签应该是第一个

像这样：

<div class="A">When I hover over this the background should change</div>
<div class="b">
    <button>Show when I hover</button>
</div>

Demo URL

Answer 3

请尝试以下操作： Demo

 .A {

    display: inline-block;
    width: 1000px;
      position: relative;
}
.b {   
    display: none;
    position: absolute;
    z-index: 999;
    right: 0;
    top:6px;
}
.A:hover {
    background: gray;
}
.A:hover + .b {
    display: block;
    background: red;
    cursor:pointer;
}

悬停在元素上并使另一个元素同时出现

3 个答案: