Jquery script works in JSfiddle but not on html page

Solution 1:

The problem might be, in jsfiddle the script was executed on dom ready (fiddle not working outside the dom ready handler).... but in your page it doesn't look like that

In jsfiddle the second dropdown in the LHS panel selects the place where the script will be added, by default it is added as a window.onload handler.

So move the invocation of icon_hover to a dom ready handler

jQuery(function(){
    icon_hover();
})

Demo: Fiddle

Solution 2:

you should use always ready event when you are working on webpage...

$(function(){
icon_hover();

});

Solution 3:

$( document ).ready( function() {
    $("#gcp-icon").hover(
        function () {
            $( "#gcp-icon-hover" ).slideDown();
        },
        function () {
            $( "#gcp-icon-hover" ).slideUp();
        }
    )
})

Solution 4:

If you check carefully on jsfiddle... When you select your JS library (jQuery 1.10.1 in your case) underneath this option jsFiddle automatically selects for you onLoad. What this does is it puts all your javascript code within a

$(window).load(function()
{ 
    //yourcode from jsfiddle goes in here
} 

This will load your js code when the windows loads.

Solution 5:

Put your startup method bindings inside.document ready.

$(document).ready(function(){//your code here.});

Also check for any duplicate html elements having same Id.