html - 在不使用 JavaScript 的情况下使图像链接出现在悬停时

Question

我有一个包含在 anchor 标记中的 DIV；所有 DIV 都是可点击的，甚至是不包含任何文本的空白区域(出于我的目的，这是需要的)。

我有另一个 anchor 标记，它绝对定位在这个具有更高 z-index 的 DIV 之上。此 anchor 标记包含图像(“关闭”图标)。

除了我只想在悬停时显示关闭图标外，这一切都正常。按照目前的实现，关闭图标始终可见。我不确定我是否以正确的方式进行此操作。更麻烦的是，我需要在不使用 JavaScript 的情况下实现它，因为我在嵌入式系统上运行并且我无力调用 JavaScript 引擎。

这只需要与 WebKit 一起工作(更具体地说，它只需要与 Chrome 一起工作)。

有人能给我一个正确方向的提示吗？

这是我正在使用的 CSS:

.content {
    border-top: 1px solid #eff1f2;
    border-bottom: 1px solid #c5c5c5;
    padding: 8px 11px;
    border-left: 1px solid #c5c5c5;
}

div.content:hover {
    background-color: #d1d6de;
}

.close {
    position: absolute;
    right: 100px;
    top: 10px;
    z-index: 0;
}

这是我的 HTML:

<div>
    <a href="native://action1/">
        <div class="content">
            <p>This is my content</p>
        </div>
    </a>
        <a href="native://action2/">
            <img class="close" src="images/close.png"/>
        </a>
</div>

Here's a jsFiddle that contains my source .

Answer 1

给定当前的 HTML，您所需要的只是对 CSS 进行简单的修改:

.close {
    display: none; /* Added this to hide the element */
    /* other CSS */
}

​div:hover a .close { /* to make the element visible while hovering the parent div */
    display: block;
}

JS Fiddle demo .

通过使用 CSS 过渡属性，您还可以使用淡入/淡出:

.close {
    opacity: 0; /* to hide the element */
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
    /* other CSS */
}

div:hover a .close {
    opacity: 1; /* to reveal the element */
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}

JS Fiddle demo .

---

还值得注意的是，在 HTML 5 之前，将 block 级元素包装在内联级 a 元素中是无效的。不过，在 HTML 5 中，这似乎是有效的(尽管我还没有找到支持这一点的 W3 文档)。