悬停在div上不起作用

Posted 2023-03-06

【中文标题】悬停在div上不起作用

【英文标题】：hovering not working on div

【发布时间】：2016-06-04 17:21:47

【问题描述】：

我正在尝试对 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);

【问题讨论】：

您的根目录中是否有名称为 custom-icon-hover.png 的图像？ （检查浏览器中的网络选项卡以查看它是否正在加载/找到）。 #panel-866 是具有类 .tab-title 的元素的直接后代（它不在您的 html 示例中）？如果是孩子，但不是直接孩子，则删除>

【参考方案1】：

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

.tab-title >

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

【参考方案2】：

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

试试这个：

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

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

【参考方案3】：

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

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

【参考方案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/

【讨论】：

为什么这被否决了？这是最全面的答案。