Question

我有一个jQuery灯箱设置，其中包含许多300x300px图像，点击这些图像即可打开灯箱。我希望能够将半透明背景和文本信息与CSS :hover:after上的视频标题叠加在一起。叠加层工作正常，灯箱可以在没有叠加代码的情况下工作。但是，只要我将这两个悬停合并，但阻止点击。这是我的HTML代码：

<div class="screenShot" id="video1">
    <a href="#"data-videoid="21183190" videosite="vimeo">
        <img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
    </a>
</div>

这是CSS：

.screenShot{
    display:inline-block;
    position:relative;
    margin:20px;
}
.ScreenShot img {
    max-width: 100%;
    height: auto;
}

#video1:hover:after {
    content: '\A';
    position: absolute;
    width:300px;
    height:300px;
    background:rgba(255,0,0,0.6);
    top:0;
    left:0;
    padding:100px auto;
    text-align:center;
    vertical-align:middle;
}

我不知道是否应该尝试通过Javascript函数触发此操作，或者如果我遗漏了格式化的简单内容。

Answer 1

使用z-index：

CSS：

#video1:hover:after {
    content:'\A';
    position: absolute;
    width:300px;
    height:300px;
    background:rgba(255, 0, 0, 0.6);
    top:0;
    left:0;
    padding:100px auto;
    text-align:center;
    vertical-align:middle;
    z-index:-1 //Generally lower than the element's z-index
}

演示：http://jsfiddle.net/GCu2D/843/

Answer 2

我明白了。标记必须包围您正在放置悬停事件的元素。我将HTML更改为：

<div class="screenShot">
    <a href="#" data-videoid="21183190" data-videosite="vimeo">
        <div id="video1">
        <img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
        </div>
    </a>
</div>

保持CSS相同，它现在似乎按预期工作。

CSS：悬停：重叠后突破jquery点击为我

2 个答案: