儿童悬停未返回未悬停状态

Question

我正在尝试构建一段代码，它是一个图像和一个文本标题，它是一个单一的锚。图片是图片标签，文字在DIV标签中。

当锚点悬停时，图像+文本框出现边框，文本div在文本之间转换，然后显示背景图像（使用不透明度1到0）

仅使用 CSS

我的问题是我似乎找不到最好的 CSS 来编写这段代码，我所拥有的是：

HTML：

<div class="outerCCBox">
<a href="*url*" >
    <img src="images/logo/clarityTeeth.png" alt="">
    <div class="clarityUnderBox">
        <div class="clarityBox">
        Clarity Makeup
        </div>
    </div>
</a>
</div>

“clarityUnderBox 是一个预置大小的框，其中包含当覆盖文本在将鼠标悬停在锚标记上时淡出时出现的背景图像。

CSS：

  .clarityUnderBox {
        width:256px !important;
        height:86px !important;
        background:url('../../images/logo/Clarity-C-320.png') no-repeat;
        background-size:contain;
    }

    .clarityBox {
        width:100% !important;
        height:100% !important;
        background-color: #000;
        opacity:1;
        color:#f0f0f0;
        transition:  color 0.4s linear,opacity 0.6s;
    }

此问题的所有 CSS 都已简化（字体、过渡类型等已删除）。 我遇到的问题似乎与下一段代码“悬停”元素有关：

.outerCCBox a:hover > .clarityUnderBox .clarityBox  {
    opacity:0;
    color:transparent;
    }

编辑的 CSS： 原来

.outerCCBox a:hover .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}

的行为方式与 ">" 选择器相同。

问题是悬停在锚元素上时可以正常工作，但在移开时，.clarityBox 类不会返回到悬停前的状态。

1) 我如何使它返回到它的悬停前状态？ 1b) 我需要单独做一个 ~a:not-on-hover CSS 声明吗？

2) 我如何整理并使“悬停”CSS 行更具体？ - 我在上面完成它的方式有效，但我确信它有更好的语法。我尝试过使用“*”和“>”选择器，但成功有限（结合 HTML 中的类顺序的一些重新排列）

感谢您的指导。

编辑： 根据要求，这里有一个更完整的小提琴： http://jsfiddle.net/gwrrezys/9/

但是这个小提琴没有在文本上方显示图像，但它确实复制了悬停不更新/或不返回其原始状态的一般问题。

干杯

解决方案：

正如 Martin 在 cmets 中所建议的，将锚定为块元素解决了这个问题，我在 jsFiddle 中保留了这个问题以供参考，可以通过反复悬停然后悬停在锚区域之外找到。

Answer 1

您的实际问题是悬停的父元素（您的锚元素）没有设置 width。
如果您将锚定为块元素，它将解决“泄漏”内容问题。通过任一

1. 使用设置width和height制作锚display: block

2. 或通过将其设置为display: inline-block 来使父级适合内容

DEMO

---

在悬停父项上显示子项的一般性：

只要您将:hover 元素的子元素扩展到整个屏幕（100% 宽度和高度），只要您将鼠标悬停在孩子。

要解决这个问题，您需要 让孩子脱离父母的流程 ...例如，将其设为 position: fixed（或 position: absolute，如果父级没有position: relative)。

例如，通过在孩子身上使用类似的东西 - 并且这里的 z-index: -1; 确保它在父母身后移动：

position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: -1;

DEMO

或者（取决于你想用孩子覆盖哪个区域）你也可以将孩子扩展到一个特定的悬停区域（例如它的父级）......然后你可以在这里使用 position:absolute 在孩子身上，position: relative 在父母身上（以确保您让孩子在父母身上流动）。

DEMO

---

^{定位元素速读：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/}