CODEWITHSUNDEEP
jqueryhtmlcss
Luca
Luca

Reputation: 108

JQuery click and hover doesn't work on div

I have a div declared as follow, but the click event doesn't work. I also need to use the :hover event in the css, but it doesn't work as well. What's the problem ?

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

the 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");  
});

I also tried

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

Upvotes: 0

Views: 911

Answers (3)

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

Working Example

$("#info-button").click(function() {
    alert("click");  
});
$("#info-hover").hover(function() {
    alert("hover");  
});
.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;
}
<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>

Upvotes: 0

Nico
Nico

Reputation: 7256

Be sure to put your code inside document.ready

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

And include properly your script in your HTML document after Jquery, example:

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

Upvotes: 1

Bikas
Bikas

Reputation: 2759

Works perfectly fine. See the JSBin.

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

EDIT: Just saw you CSS, I think your DIV might be drawing outside the body, if its parent DIV. You've top set to negative value in absolute postioning.

.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;
}

You can check if this is the case

Upvotes: 1

Related Questions