Question

我有一个div声明如下，但click事件不起作用。我还需要在css中使用：hover事件，但它也不起作用。有什么问题？

<div id="info-button" class="info-button"></div>

css

.info-button {
    position:absolute;
    top:-200px;
    left:50px;
    background-image: url('../img/info-icon.png');
    background-size: 100%;
    background-position: 0px 0px;
    width: 89px !important;
    display: inline-block;
    height: 89px;
    background-repeat: no-repeat;
}

JQuery的

$("#info-button").click(function() {
    alert("click");  
});

我也试过

$("#info-button").on("click", function () {
    alert("click");
});

Answer 1

完美无缺。参见JSBin。

http://jsbin.com/lusiyalusu/edit?html,js,output

编辑：刚看到你的CSS，我认为你的DIV可能是在身体之外，如果是它的父DIV。您top位置negative设置为absolute值。

.info-button {
    position:absolute;
    top:-200px;
    left:50px;
    background-image: url('../img/info-icon.png');
    background-size: 100%;
    background-position: 0px 0px;
    width: 89px !important;
    display: inline-block;
    height: 89px;
    background-repeat: no-repeat;
}

您可以检查是否是这种情况

Answer 2

请务必将您的代码放入document.ready

$( document ).ready(function() {
   $("#info-button").click(function() {
    alert("click");  
    });
});

在Jquery之后将您的脚本正确包含在HTML文档中，例如：

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/your_script.js"></script>

Answer 3

工作示例

＆＃13;

$("#info-button").click(function() {
    alert("click");  
});
$("#info-hover").hover(function() {
    alert("hover");  
});

＆＃13;

.info-button {
    background-color: #f0f0f0;
    background-image: url("../img/info-icon.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: inline-block;
    height: 89px;
    
    
    width: 89px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info-button" class="info-button"></div>

<div id="info-hover" class="info-button"></div>

＆＃13;

JQuery单击和悬停不适用于div

3 个答案: