4

我制作了一个简单的 Fiddle 来演示我的问题。http://jsfiddle.net/JTqww/

HTML：

<body>
    <div class="button">
        <a href="#">
            <img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
            <span class="desc">Description</span>
        </a>
    </div>
</body>

CSS：

.button {
    float: left;
    width: 100px;
}

.button a {
    background:green;
    float:left;
    z-index:-1;
}

img {
    display:inline-block;
}

.desc{
    display:inline-block;
    text-align:center;
    width:200px;
    background-color:blue;
    color:white;
}
.button:after {
    position:   absolute; 
    top:        10%;
    left:       10%; 
    content:"I destroy your anchor";
    color:red;
    position:   absolute; 
    width:      50%;
    height:     50%;


    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}

如您所见，我在图像顶部制作了一个带有覆盖玻璃反射效果的按钮。我希望下面的图像和描述都包含在一个锚标记中（它们是但 :after 内容似乎阻止了锚）。如果将鼠标移到有光泽的白色区域之外，它将与锚点交互，但在白色光泽区域内则不会。

我已经尝试浮动锚点并更改 z-index，但放置的内容 :after 按钮（“光泽”）似乎阻止了锚点接收鼠标悬停和单击事件。

有人知道怎么修这个东西吗？非常感谢任何帮助。

4

4 回答 4

3

我用你的代码解决了，所以它看起来不错。

这是小提琴

要使单击也对添加的描述起作用，只需:after使用 toa或spantag 而不是 class .button。

工作小提琴

于 2013-03-13T12:09:41.787 回答
2

由于您的:after内容不是锚的一部分，因此无法单击，因此您不能将其放置在锚的顶部，然后期望能够单击您的锚

现在，如果您更改.before:after为.desc:after您的链接将是可点击的：

http://jsfiddle.net/JTqww/2/

你只需要弄乱样式就可以让它重新排列

于 2013-03-13T11:48:02.773 回答
0

正如@Pete 所说，您生成的内容不是您的锚的一部分，因此它不会如此行事。最简单的解决方法是div.button完全删除您的，并将该类直接应用于您的a：

    <a href="#" class="button">
        <img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
        <span class="desc">Description</span>
    </a>

生成的内容本身是锚的一部分，因此是可点击的。你最初的 CSS 也需要整理一下。类button，无论它应用到什么，都需要有position: relative，以便它创建一个新的定位上下文。然后覆盖层将正确放置 - 请参阅此分叉。

于 2013-03-13T11:51:54.383 回答
0

相反，你可以直接给div

<div class="button">
    <a href="#">
        <img src="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
        <div class="overlay">I destroy your anchor</div>
        <span class="desc">Description</span>
    </a>
</div>

演示

于 2013-03-13T11:55:05.793 回答