0

我有一个包含在锚标记中的 DIV；所有的 DIV 都是可点击的，即使是不包含任何文本的空格（出于我的目的，这是需要的）。

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

这一切正常，除了我只希望关闭图标出现在悬停时。按照目前的实现，关闭图标始终可见。我不确定我是否以正确的方式解决这个问题。更进一步的问题是，我需要在不使用 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>

这是一个包含我的源代码的 jsFiddle。

4

1 回答 1

4

鉴于您当前的 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 小提琴演示。

通过使用 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 小提琴演示。

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

于 2012-05-15T05:01:54.893 回答