Jquery 脚本可以在 JSfiddle 中运行,但不能在 html 页面上运行

2024-05-26

我创建了一个JSFiddle http://jsfiddle.net/defjam64/w4sGZ/4/其按预期工作。

//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 http://aljidy.co.uk/jstest.html,这不能按预期工作。

我已经尝试过调试。 Javascript 有效并且所有依赖项(例如 Jquery.js 等)均可用。


问题可能是,在 jsfiddle 中,脚本是在 dom 就绪时执行的(fiddle http://jsfiddle.net/arunpjohny/JuYSD/1/不在 dom 就绪处理程序之外工作)....但在您的页面中它看起来不像那样

在 jsfiddle 中,LHS 面板中的第二个下拉菜单选择将添加脚本的位置,默认情况下它被添加为window.onload处理程序。

所以移动调用icon_hover到 dom 就绪处理程序

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

Demo: Fiddle http://jsfiddle.net/arunpjohny/JuYSD/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery 脚本可以在 JSfiddle 中运行,但不能在 html 页面上运行 的相关文章

随机推荐