即使没有悬停，Css Hover 也是一致的答案

【问题标题】：Css Hover are consistent even if not hovered即使没有悬停，Css Hover 也是一致的
【发布时间】：2014-02-04 00:38:03
【问题描述】：

只是想问一下可能出了什么问题，几年前我正在使用 wordpress 并修改了主题 css，我多年来没有检查过该网站，并且在查看圆圈的每个元素的悬停时都保持悬停效果即使它没有悬停。在其正常视图中，深灰色的内圈与帖子标题一起应该是不可见的，直到它被悬停请看图片：

有什么想法吗？该网站是 -- --

谢谢

【问题讨论】：

是的，我们这些在工作场所提供帮助的人可能不会去那里看。显示 php 呈现的 HTML、相关的 CSS 和任何相关的 JavaScript（如果有的话）。我们需要的是代码，而不是一个在问题解决后将停止展示问题的实时站点的链接。在决定显示什么代码时，我们需要的是Minimum, Complete, Tested and Readable example。此外，JS Fiddle 或类似网站上的现场演示可能对那些想要帮助您的人有所帮助。
使用 CSS 调试器，例如 Chrome 中的开发者工具 (F-12) 或 Firebug For Firefox（免费下载）来检查您的元素。请在您的问题中包含相关的 rednered 代码，看看您是否可以在更适合工作的环境中复制您的问题，例如 jsfiddle.net 或 codepen.io
感谢我对 codepen.io 和类似的东西还很陌生，但这就是没有标题悬停时的样子：codepen.io/anon/pen/xEfwj
通过以下 carol div.caption.boxcaption{} div.caption.boxcaption:hover{} 评论中的指导获得解决方案

标签： css wordpress hover mousehover onhover

【解决方案1】：

a标签中的h3有颜色值

div.caption.boxcaption a.view h3 { color:Transparent; }

 div.caption.boxcaption a.view:hover h3 { color:White; }

您需要将背景阻挡图像定位在 a.view 上，而不是 div.boxcaption 将其位置更改为 a.view:hover 上的屏幕外

div.boxcaption {
   background: url("images/circle_caption.png") no-repeat scroll center top rgba(0, 0, 0, 0);
height: 112px;
left: 0;
margin-left: 21px;
padding: 65px 10px;
position: absolute;
text-align: center;
top: 21px;
width: 210px;
z-index: 1000;
}

【讨论】：

感谢 Carol 指出主要问题，我通过添加 div.caption.boxcaption{} div.caption.boxcaption:hover{} 使其正常工作，此规则制定了解决方案，现在运行良好，谢谢！