Question

我有以下HTML：

<div class="wraper">
   <div class="elementA"></div>
   <div class="elementB"></div>
   <div class="elementC"></div>
</div>

当我们将鼠标悬停在 elementC 上时，我需要更改 elementA 的background-color。我尝试了很多CSS示例但没有成功。

如何通过使用CSS来实现？没有JavaScript或JQuery。

Answer 1

您无法选择sibling之前的selector。

然而，有两个可能的解决方案，要么使用Javascript，要么只需在一个位置重新排序您的元素，然后您可以选择，重新排序它通过设置Position: Absolute;

再次定位

Answer 2

可以只用CSS完成，虽然有一些限制可能会阻止你使用它。我将:hover移到了父级，并在elementB上关闭了pointer-events。不幸的是，这意味着IE，IE11+ will be required。 Chrome和Firefox已经得到了很好的支持。我还必须重置elementA上的background-color，否则当将鼠标悬停在elementA上时，颜色也会被修改。最后，您的真实页面上的标记和其他CSS可能会有所不同，这也可能会阻止这是一个很好的解决方案。

我无法想到在CSS中执行此操作，因此如果这不符合您的要求，则JavaScript是唯一的解决方案。

Demo

<强> HTML

<div class="wrapper">
   <div class="elementA">A</div>
   <div class="elementB">B</div>
   <div class="elementC">C</div>
</div>

<强> CSS

.wrapper:hover .elementA {
    background-color:red;
}

div {
    width:20px;
    height:20px;
}

.wrapper div {
    border:1px dashed lightskyblue;
}

.elementB {
    pointer-events:none;
}

.wrapper .elementA:hover {
    background-color:white;
}

Answer 3

如果你想在普通的CSS中做到这一点，那将是困难的，但并非不可能。您可以使用浮点数（水平）或可能更具动态性的绝对元素。当然，你需要有一个已知的宽度/高度，以便元素正确定位。

HTML：

<div class="wrapper">
    <div class="elementC"></div>
    <div class="elementA"></div>
    <div class="elementB"></div>
</div>

CSS（没有位置值）。

.wrapper {
    position:relative;
}

.wrapper>div {
    position:absolute;
}

.elementC:hover+.elementA {
    background-color:#333;
}

使用位置值（顶部，右侧，底部，左侧），您可以更改元素的可见位置。加号选择上一个选定后的下一个元素。

Answer 4

是的，你只能使用CSS，但是＆＃39; elementA＆＃39;必须是在元素C＆＃39; 这是代码

.elementC:hover ~ .elementA {
    color: #ccc /* example */
}

常用同级选择器

的here's the documentation

Answer 5

wrapper{ background:black;}

.elementA {
    display: block;
    width: 100%; background:blue;
    height: 50px;
}

.elementB {
    display: block;
    color: #ffffff;
    background-color:red;
    text-align: center;
    width:100%;
    padding: 10px;
}


.elementC {
    display: block;
    color: #ffffff;
    background-color:pink;
    text-align: center;
    width:100%;
    padding: 10px;
}

.elementA:hover + .elementC + .elementB {
    display: block;
    background:green;
}

仅使用CSS将鼠标悬停在另一个元素上时更改元素CSS

5 个答案: