Question

我试图在单个图像悬停上获得多个效果，以尽可能少的代码获得最佳结果。注意：我根本不想要jquery！仅限CSS（甚至3）。

所以我有一个图像会在悬停时发生变化，同时导致所述图像下方的Div也改变背景图像（实际上是文本，我找不到改变文本的方法所以我尝试了图像）并且在IMG标签上都有悬停图像，以便链接到我想要的地方。

到目前为止，我设法通过以下方式更改图像并使用悬停图像处理链接：

CSS

.container
{
    width: 1500px;
    height: 400px;
}

.image a:hover .container
{
    background-image: url('logo-tp-text.png');
}

HTML

<div class="image">
    <a href="http://www.google.com">
        <img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">
    </a>
</div>

<div class="container"></div>

现在，因为你比我更有经验的人可以看到，我有IMG标签上的图像自我上架和外出以试图避免CSS的复杂化，这有效：它变成我需要的图像（LOGO-FB ）并恢复到LOGO-TP onmouseout，链接正常。但是，在将鼠标悬停在IMG标记（即A标记引用）上时，它不会像预期的那样更改.container背景。

所以，等待殴打：我做错了什么？使用FF 32浏览器。

Answer 1

Css不包含父导航选择器...只有后代和后面的sibilings。

由于.container div是.image div的兄弟，你可以将:hover伪设置为div而不是锚：

.image:hover ~ .container {
     background-image: url('logo-tp-text.png');
}

由于~是一般的兄弟选择器。

此处有更多信息：MDN General sibiling selector

同时

如果html标记保持与您显示的相同，我的意思是，如果.container仍然是立即跟随 sibiling到.image div，您也可以使用Adjacent Sibiling Selector

.image:hover + .container { background-image: url('logo-tp-text.png'); }

对单个DIV元素悬停的多重影响

1 个答案: