Question

我创建了一个按预期工作的JSFiddle。

//Jquery script
function icon_hover()
{
    $("#gcp-icon").hover( function(){
       $("#gcp-icon-hover").slideDown();
 },
 function(){
    $("#gcp-icon-hover").slideUp();
});
}

icon_hover();


   //CSS
.site_logo{
    width: 250px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.75);
}
.site_logo_hover{
    width: 250px;
    height: 250px;
    background-color:#000000;
    opacity:0.6;
    display:none;
}


#gcp-icon
{
    background: url(http://i.imgur.com/soDjoS4.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.hover_title{
    color: white;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    font-weight: 600;
    font-size: 11pt;
    font-family: verdana;
}

.hover_text{
    color: white;
    width: 245px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px; 
    font-family: verdana;
    font-size:9pt;
}

.click_me{
    color: white;
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    font-weight: 600;
    font-size: 10pt;
    font-family: verdana;
}

<!--HTML-->
<div class="site_logo" id="gcp-icon">
<div class="site_logo_hover" id="gcp-icon-hover">
    <div class="hover_title" id="gcp-title">Grace Cook Photography</div>
    <div class="hover_text" id="gcp-text">Simple, subtle, clean and good looking</div>
    <div class="click_me">Click for more details</div>
</div>
</div>

但是，正如标题所示，当将其复制并粘贴到html页面并在网络浏览器see this中打开时，这不会按预期工作。

我试过调试。 Javascript是有效的，所有依赖项（例如Jquey.js等）都可用。

Answer 1

当您在网页上工作时，您应该使用随时可用的事件...

$(function(){
icon_hover();

});

Answer 2

问题可能是，在jsfiddle中脚本是在dom ready上执行的（fiddle在dom ready handler之外没有工作）....但是在你的页面中它看起来不像那样

在jsfiddle中，LHS面板中的第二个下拉列表选择了添加脚本的位置，默认情况下会将其添加为window.onload处理程序。

所以将icon_hover的调用移到dom ready handler

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

演示：Fiddle

Answer 3

将启动方法绑定放在inside.document中。

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

同时检查具有相同Id的任何重复html元素。

Answer 4

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

Answer 5

如果你仔细检查jsfiddle ...当你选择你的JS库（在你的情况下为jQuery 1.10.1）这个选项下面时，jsFiddle会自动为你选择onLoad。它的作用是将所有的javascript代码放在

中

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

这将在Windows加载时加载你的js代码。

Answer 6

$(document).ready(function(){icon_hover();});

Jquery脚本在JSfiddle中工作，但在html页面上不起作用

6 个答案: