Question

我做了一个简单的小提琴来证明我的问题。 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 */

}

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

我尝试浮动锚点并更改z-index但放置的内容：在按钮（'gloss'）之后似乎阻止锚点接收鼠标悬停和点击事件。

任何人都知道如何解决这个问题？任何帮助非常感谢。

Answer 1

我解决了你的代码问题，看起来不错。

以下是fiddle

要使点击工作也适用于添加的说明，只需将:after提供给a或span代码而不是课程.button。

Working Fiddle

Answer 2

由于您的:after内容不是主播的一部分，因此无法点击，因此您无法将其放在主播的顶部，然后希望能够点击您的主播

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

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

你只需要弄乱风格就可以让它再次排队

Answer 3

正如@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，以便创建新的定位上下文。然后叠加层将正确显示 - 请参阅this fork。

Answer 4

相反，您可以直接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>

<强> DEMO

如何阻止我的内容：阻止我的主播后的内容？

4 个答案: