悬停在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;
}

请注意，我创建了内联 span 元素 display:block（这在技术上是“允许的”），所以我可以给它一个宽度和高度。即使在 div 元素上，背景图像也需要宽度和高度才能显示。

其次，正如其他发帖人所提到的，需要向您的 :hover 样式规则添加一个 !important 声明，因为浏览器总是会用内联规则覆盖内部或外部样式规则。

https://jsfiddle.net/3b2ywp5b/