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

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;
}

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

DEMO HERE