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;
}

的行为方式与“＆gt;”相同选择。

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

1）如何让它返回到悬停状态？ 1b）我是否需要单独制作一个a：not-on-hover CSS声明？

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

感谢您的指导。

修改：根据要求，这里有一个更大的小提琴： http://jsfiddle.net/gwrrezys/9/

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

欢呼声

解：

正如Martin在评论中所建议的那样，使锚点成为一个块元素来解决这个问题，我在jsFiddle中保留了这个问题以供参考，可以通过反复悬停然后将其悬停在锚点区域来找到。

Answer 1

您的实际问题是悬停的父级（您的锚元素）没有设置width 如果你将锚点作为一个块元素，它将修复＆＃34;泄漏＆＃34;内容问题。

使用display: block和width

height

或通过将其设为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

或者（取决于您要与孩子完全覆盖的区域），您也可以仅在特定的悬停区域（例如其父母）上扩展孩子......在这里您将使用 {{1}孩子的和父母的 position:absolute （以确保让孩子保持在父母的流程中）。

DEMO

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

孩子悬停没有返回到未发现的状态

1 个答案:

DEMO