CODEWITHSUNDEEP
jquery
thank_you
thank_you

Reputation: 11107

Hover jQuery Not Activating

When I hover over the input field, nothing happens. Chrome console returned with no bugs or errors. JQuery script is put in my code. Here is the code below.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">    

</script>

<style type="text/css">
    #button1 {display: none;}
</style>

<script type="text/javascript" >

    $('#form1').hover(function(){$('#button1').css("display", 

    "block");$(this).fadeIn(100);});

</script>

    <input type="text" id="form1"/>


    <input type="button" id="button1" />

Upvotes: 0

Views: 43

Answers (2)

j08691
j08691

Reputation: 207891

Put your jQuery inside a document ready call:

$(document).ready(function() {
    $('#form1').hover(function(){
        $('#button1').css("display", "block");
        $(this).fadeIn(100);
    });
});

jsFiddle example

Upvotes: 2

Chris Thompson
Chris Thompson

Reputation: 35598

Change it from 

$('#button1').css("display", "visible");

To

$('#button1').css("display", "block");

Also, you need to wrap the whole thing inside $(document).ready() like so:

<script type="text/javascript" >

    $(document).ready(function(){
        $('#form1').hover(function(){
            $('#button1').css("display", "block");
            $(this).fadeIn(100);
            }
        );
    });

</script>

Upvotes: 1

Related Questions