如何更改一个元素鼠标悬停在另一个元素上的样式？

Question

当我在其中一个六边形上盘旋时，我正试图改变WORK div的样式。我把它们全部放在一张桌子里作为一个容器，但它似乎没有用。 也许你可以给我一个提示，谢谢。

示例

Answer 1

我刚刚回答了另一个这样的问题（但是特定于任务）。我将使用相同的示例，以便您了解它是如何工作的。

您可以使用CSS执行此操作：

HTML：

<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />

<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>

CSS：

.mnrImageH2 {
    position: absolute;
    top:1px;
    left: 0;
    width: 100%;
}
.mnrImageSpan {
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    padding: 10px;
}
h2 {
    color: white;
}
img:hover + h2 {
    color: #000;
}

因此，当我们将鼠标悬停在+上时，我们可以使用h2选择器选择img。拿这个来做你需要做的事。

DEMO HERE

Answer 2

这可以帮助你解决问题，如果你对此不满意，那么我会尝试解决这个问题。

<div>
    <div class="e" >Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>         
<div class="f">
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div> 

并使用像这样的悬停，     .E     {         宽度：90像素;         border-right：1px solid＃222;         文本对齐：中心;         向左飘浮;         填充左：2px的;         光标：指针;

}
.f .e
{
    background-color:#F9EDBE;

}
.e:hover{
   background-color:#FF0000;
}

Answer 3

如果我正确理解你的观点，答案就是“你不能使用当前架构。”

您应使用+或~选择器。如果元素具有相同的父元素，它们可以工作，因此如果任何六边形悬停但您无法确定特定的元素，则可以应用CSS规则。

将规则添加到您的示例中以查看我在说什么：

*:hover + * > * > .work-box{
     border: solid red;
}

如果您的元素具有相同的父解决方案，则非常简单 - Example

俄语发言人有一个很好的网站about ~ selector