悬停在 div 上不起作用

Question

我正在尝试对 div 应用悬停效果。为什么这根本不起作用？

我的 Html 看起来像这样：

<a href="#panel-866" id="panel-866">
  <div class="application-icon" style="background-image: url('/custom-icon-off.png')">
&nbsp;</div>
</a>

CSS

.tab-title > #panel-866 .application-icon:hover {
    background-image:url(/custom-icon-hover.png);
}

Answer 1

'>' - 选择器获得直接后代，也许只是删除

.tab-title >

它会起作用的。不知道您的标记很难说，因为这是一项简单的任务，而且您的解决方案似乎是正确的。

Answer 2

您需要覆盖内联样式，其 specificity 高于外部/嵌入式样式。

试试这个：

#panel-866 > .application-icon:hover { 
    background-image:url('/custom-icon-hover.png') !important;
}

这是一个演示：https://jsfiddle.net/0aghvn3u/

Answer 3

使其变得重要，以便它覆盖锚标记的默认悬停样式。

.tab-title > #panel-866 .application-icon:hover {
    background-image:url('/custom-icon-hover.png') !important;
}

Answer 4

您的代码存在一些问题，因此很难说出问题的具体原因。您在 a 标记中有一个 div 元素，您应该避免这种情况，因为块级元素在内联元素中效果不佳。不过，这可能不是问题所在。

我添加了一些标记并删除了一些 CSS，其中包含一个不在您此处提供的代码中的选择器，这可能导致效果不起作用：

<a href="#panel-866" id="panel-866">
    <span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
        &nbsp;
    </span>
</a>

和

#panel-866 .application-icon {
    height: 400px;
    width: 400px;
    display: block;
}

#panel-866 .application-icon:hover {
    background-image: url(http://lorempixel.com/200/400) !important;
}

请注意，我制作了内联跨度元素 display:block（这在技术上是 "allowed"）所以我可以给它一个宽度和高度。即使在 div 元素上，背景图像也需要宽度和高度才能显示。

其次，正如其他张贴者提到的，需要向您的 :hover 样式规则添加 !important 声明，因为浏览器将始终使用内联样式规则覆盖内部或外部样式规则。

https://jsfiddle.net/3b2ywp5b/

悬停在 div 上不起作用

hovering not working on div

html

css

hover

css-selectors