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

时间:2014-01-24 08:16:59

标签: html css hover

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

示例

3 个答案:

答案 0 :(得分:2)

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

您可以使用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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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

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

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

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