Html 将div:after与url链接和悬停选择器组合

是否可以合并以下div:after

.homepage .tm-toolbar:after {
display: inline-block;
width: 196px;
height: 196px;
margin-top: -107px;
margin-left: 60px;
content: "";
background: url("../../../../../images/logo/logo_big.png"); no-repeat 0 0;
background-size: 100%;    
}

使用悬停选择器以便更改图片

有没有办法为整个div/图片设置链接

提前非常感谢。

您只需要：

.homepage .tm-toolbar:hover:after{
    background: url("../../../../../images/logo/logo_big2.png"); no-repeat 0 0;
    background-size: 100%;    
}

这里有一个小提琴，展示了这项工作：

如果它在你的页面上不起作用，问题可能出在其他地方。 你检查过你的选择器了吗

或者你的图像路径？（尝试绝对路径）

---

此外，不能在伪元素上设置链接。CSS应该只用于设计，而不是内容

悬停在哪个元素上？您只需使用

.homepage:hover.tm toolbar:：after

或

.homepage.tm toolbar:：after:hover

。请注意，对于伪元素，应该使用

：

而不是

：

。后者是为伪类保留的。请将div包装在href标记中或使用javascript谢谢您的快速回答。我正在尝试将鼠标悬停在after元素上。我尝试了.homepage.tm toolbar:：after:hover{background:url（“../../../../../images/logo/logo_small.png”）；没有重复0；}但它不起作用。@VitorinoFernandes:我如何在href标记中包装一个“div:after”呢？你需要在

标记中添加

div谢谢@FC'，但这对我不起作用。我尝试了.homepage.tm工具栏：：after:hover{background:url（“../../../../../../images/logo/logo_big.png”）；不重复0；}和。homepage.tm工具栏：：after:hover{background:url（“../../../../../../images/logo/logo_small.png”）；无重复0；}