添加css到包含img的div，使其在jQuery中不可点击 [英] Added css to a div containing img, makes it unclickable in jQuery

问题描述

我使用jQuery Mobile，创建一个小型移动应用程序。我有一个页面，其中只包括一个GIF。虽然GIF可以点击，移动到下一页。但是关键是GIF在一些设备中不是全屏的，所以我添加了一些CSS使它全屏，意味着拉伸它，这是工作，但然后它使得div（或GIF）不可点击。

I'm using jQuery Mobile, to create a small mobile app. I have a page which includes just a GIF. Though the GIF can be clickable, to move to the next page. But the point is that the GIF is not full screen in some devices, so I added some CSS to make it full screen, meaning to stretch it, which works, but then it makes the div (or GIF) unclickable. So I cannot click it to move to the next page, you need to wait for the animation to finish.

下面是在HTML中定义页面的方法：

Here is how the page is defined in HTML:

<div id="correctGIF" data-role="page" data-add-back-btn="false">
    <img src="images/Correct1.gif">
</div>

我添加了这个CSS：

#correctGIF {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: -1;
}

#correctGIF > img {
    width: 100%;
    height: 100%;
}

有什么办法，如何拉伸GIF来覆盖

Is there any way, how can I stretch the GIF to make it cover the whole screen, without making it unclickable?

推荐答案

这是z-index问题。因为你设置z-index：-1;所以div是不可点击的。将z-index更改为postive整数或删除css中的z-index

It is z-index problem. Because you set z-index: -1; so that the div is unclickable. Change z-index to postive integer or remove z-index in css

这篇关于添加css到包含img的div，使其在jQuery中不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！