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

您需要覆盖内嵌样式，它们比外部/嵌入样式具有更高的specificity。

试试这个：

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

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

Answer 2

＆＃39;＆gt;＆＃39; - 选择器获得直接后代，可能只是删除

.tab-title >

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

Answer 3

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

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

Answer 4

您的代码存在一些问题，因此很难说出具体导致问题的原因。您在div标记中有一个a元素，您应该避免使用该元素，因为块级元素在内联元素中不能很好地工作。不过，这可能不是问题。

我添加了一些标记并删除了一些包含选择器的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（这在技术上是＃34;允许＆＃34;）所以我可以给它一个宽度和高度。即使在div元素上，背景图像也需要显示宽度和高度。

其次，正如其他海报所提到的那样，需要在您的:hover样式规则中添加！important声明，因为浏览器将始终使用内联样式覆盖内部或外部样式规则。

https://jsfiddle.net/3b2ywp5b/

徘徊不工作div

4 个答案: