CSS不适用于带有文本的div答案

【问题标题】：CSS not working for div with textCSS不适用于带有文本的div
【发布时间】：2012-01-09 10:01:18
【问题描述】：

我有一排带有 :hover 的 div，当我将鼠标悬停在 div 中的图像上时它正在工作。但是，它不想为文本工作。我在 html 和 css 的较新方面，因此感谢您的帮助。我一定遗漏了一些明显的东西吗？

使用 div.topIconsHover:hover CSS 的第一个有效。另一个没有。我也尝试将 topIconsHover 类应用到 div 中，但它仍然不起作用。那么，我一定是对 HTML 做错了什么？但我只是不确定是什么。帮助表示赞赏！谢谢。

注意：我在外部工作表中有 CSS。

div.topIconsHover:hover {
    background-color:#555555;
}

<div class="topIcons topIconsHover">            
    <a href="tools.html"><img src="tools16lg.png" /></a>                
</div>

div.topTextHover:hover {
    background-color:#555555;
    color:#ffffff
}

<div id="topBrowse" class="topTextHover">       
    <a href="browse.html">Browse</a>                    
</div>

【问题讨论】：

标签： css html hover

【解决方案1】：

锚标签具有优先的默认文本颜色（通常为蓝色）。您需要明确定义：

div.topIconsHover:hover {
    background-color: #555555;
}

div.topTextHover:hover {
    background-color: #555555;
}

div.topTextHover:hover a {
    color: #ffffff
}

【讨论】：

还是不行。我像你一样分开了类，改变文本颜色仍然不起作用。我什至试着把它完全去掉，只是让背景工作……但我把鼠标悬停，什么也没有。
你不应该需要所有这些伪类，但我只是想确保它不是跨浏览器问题，或者因为我自己没有真正访问过链接（真的可能只是访问了导致问题的伪类）。
我尝试了更新（即使有所有的 :link、:visited 等）...但它似乎仍然不起作用。嗯...
@user1066982：检查这个 jsfiddle jsfiddle.net/7s9zW/1。这是你的代码。如果可行，请再次查看您的代码以确保您没有语法错误。

【解决方案2】：

color 属性仅适用于文本元素，而不适用于 div。所以你应该像这样将class标签应用到你的href标签：

<style type="text/css">
.topTextHover:hover {
    background-color:#555555;
    color:#ffffff
}
</style>

<div id="topBrowse">       
    <a href="browse.html" class="topTextHover">Browse</a>                    
</div>

编辑：

如果您要为链接本身定义一个基类和 HOVER 状态，请这样做：

<style type="text/css">
.topTextHover {
    background-color: transparent;
    color: #0000ff;
}
.topTextHover:hover {
    background-color: #555555;
    color: #ffffff;
}
</style>

<div id="topBrowse">       
    <a href="browse.html" class="topTextHover">Browse</a>                    
</div>

祝你好运

【讨论】：

它似乎仍然不起作用。此外，即使背景颜色也不起作用。
TIP：“div.theStyle”表示样式只适用于div，“a.theStyle”表示该样式只适用于锚标签。如果你没有像我一样指定元素类型（.theStyle，无 div. 或无 a.），样式可以应用于不同的元素。
我知道这段代码在 Lynx Viewer 中不起作用.. ;-) 请记住在您的代码中将“div.topTextHover:hover”替换为“.topTextHover:hover”。
这并没有达到我认为 OP 想要的效果，只有当文本本身悬停时，文本才会变成白色，而不是简单地悬停在 div 上。您仍然会在深灰色效果上获得几乎可读的蓝色。
我很欣赏有关删除“div”的提示。或“一个”。使其更通用。很高兴知道。无论如何，在删除它并在中应用“class=”之后......背景终于至少工作了。如果我的鼠标仍然悬停在 div 中，背景也可以使用。但是，文本仍然不会改变颜色（即使直接翻转）。

【解决方案3】：

您将样式应用于“:hover text”，但没有应用于链接。这应该可以解决问题（未经测试）：

div.topIconsHover:hover {
    background-color:#555555;
}

<div class="topIcons topIconsHover">            
    <a href="tools.html"><img src="tools16lg.png" /></a>                
</div>

div.topTextHover:hover, div.topTextHover:hover a {
    background-color:#555555;
    color:#ffffff
}

<div id="topBrowse" class="topTextHover">       
    <a href="browse.html">Browse</a>                    
</div>

【讨论】：

【解决方案4】：

有两种非常简单的方法可以解决这个问题。

首先，如果您对位于 div 内的锚标记 (<a href=''></a>) 没有任何高度/宽度要求，请执行以下操作：

.topTextHover a:hover{
    background-color:#555555;
    color:#ffffff
}

<div id="topBrowse" class="topTextHover">       
    <a href="browse.html">Browse</a>                    
</div>

如果您确实对 div 内的文本有空间要求（即您希望文本垂直对齐到中心并水平居中），那么我会做以下注释*这是向后兼容但实际上只兼容使用 CSS3

#BrowseLink:hover {
    background-color:#555555;
    color:#ffffff
}

<a id="BrowseLink" href="browse.html">
  <div id="topBrowse" class="topTextHover">       
    Browse                   
  </div>
</a>

另外值得注意的是，IE6 不喜欢将伪类悬停在锚标记以外的任何东西上，因此无法正常工作。这可能也适用于其他浏览器，但我知道有问题的主要浏览器是网站上常见的浏览器的 IE6。

【讨论】：