Question

我有一个用锚标签包裹的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>

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之前，将块级元素包装在内联级别a元素中是无效的。但是，在HTML 5中，这似乎是有效的（尽管我还没有找到支持它的W3文档）。

不使用JavaScript，在悬停时显示图片链接

1 个答案: