1. 首頁
  2. 問答
  3. jQuery沒有生成所需的輸出頁

jQuery沒有生成所需的輸出頁

2017-07-29 46 views
0

所以我很新的jQuery，我試圖在我的投資組合網站中使用它。從我可以告訴我的代碼應該產生一些輸出，當我懸停在我的投資組合窗口窗口，但是當我嘗試這個......沒有任何反應。我想知道是否有人知道我錯過了什麼，或者沒有正確地做正確的事情，導致這種情況。jQuery沒有生成所需的輸出頁

$(document).ready(function() { 
 

 
    //mouseenter overlay 
 
    $('ul#gallery li').on('mouseenter', function() { 
 

 
    // Get data attribute values 
 
    var title = $(this).children().data('title'); 
 
    var desc = $(this).children().data('desc'); 
 

 
    //validation 
 
    if (desc == null) { 
 
     desc = 'Click To Enlarge'; 
 
    } 
 

 
    if (title == null) { 
 
     title = ''; 
 
    } 
 

 
    //Create overlay div 
 
    $(this).append('<div class="overlay"></div>'); 
 

 
    //Get the overlay div 
 
    var overlay = $(this).children('overlay'); 
 

 
    // Add html to overlay 
 
    overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>'); 
 

 
    // Fade in overlay 
 
    overlay.fadeIn(800); 
 
    }); 
 

 
    $('ul#gallery li').on('mouseleave', function() { 
 

 
    //Create overlay div 
 
    $(this).append('<div class="overlay"></div>'); 
 

 
    //Get the overlay div 
 
    var overlay = $(this).children('overlay'); 
 

 
    //Fade out overlay 
 
    overlay.fadeOut(500); 
 
    }); 
 

 
});
body{ 
 
    background-color: white; 
 
    font-family:Orbitron; 
 
    color:white; 
 
} 
 

 
.fa-stack-overflow{ 
 
color: #f48024 
 
} 
 

 
.fa-github{ 
 
color:rgb(102,43,129); 
 
} 
 

 
.fa-linkedin{ 
 
color:rgb(0,127,178); 
 
} 
 

 
.fa-facebook-official{ 
 
color:rgb(59, 89, 153); 
 
} 
 

 
.nav-pills{ 
 
font-size: 1.7em; 
 
background-color: none; 
 
margin-bottom: 10%; 
 
} 
 

 

 
.block{ 
 
    background-color: #337ab7; 
 
    opacity: .7; 
 
    padding:10px; 
 
    width:50%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    border-radius:5px; 
 
} 
 

 

 
h1{ 
 
    padding:0; 
 
margin-top: 0px; 
 
font-size: 5.0em; 
 
} 
 

 
.btn-default{ 
 
font-size:1.7em; 
 
color:#337ab7; 
 
} 
 

 

 
.pageOne{ 
 
    background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-repeat: none; 
 
    background-size: cover; 
 

 
    height: 1000px; 
 

 
} 
 

 
/* 
 
parallax effect start 
 
*/ 
 
.pageOne, .pageThree{ 
 
position: relative; 
 
background-position: center; 
 
background-size: cover; 
 
background-repeat: no-repeat; 
 
background-attachment: fixed; 
 
} 
 

 

 

 
/* 
 
parallax effect end 
 
*/ 
 

 
.pageTwo{ 
 
background: white; 
 
color:#337ab7; 
 
background-repeat: none; 
 
background-size: cover; 
 
height: 400px; 
 
padding-top: 5%; 
 
background-attachment: fixed; 
 
} 
 

 
.pageTwoblock{ 
 
border-radius:5px; 
 
} 
 

 
.boxed{ 
 
    font-size: 1.7em; 
 
text-align: center; 
 
margin-right: auto; 
 
margin-left: auto; 
 
} 
 

 

 

 

 
.me{ 
 
height: 850px; 
 
    display:block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 

 
} 
 

 
.pageThree{ 
 
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
background-repeat: none; 
 
background-size: cover; 
 
height: 1000px; 
 
padding-top:5%; 
 
background-attachment: fixed; 
 
} 
 

 
.container{ 
 
    width:80%; 
 
    margin:auto; 
 
    overflow:auto; 
 
} 
 

 
section{ 
 
    padding:20px 0; 
 
    overflow:hidden; 
 
} 
 

 
#gallery{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#gallery li{ 
 
    display: block; 
 
    float: left; 
 
    width: 23%; 
 
    cursor: pointer; 
 
    border: 5px; 
 
    box-sizing: border-box; 
 
    margin: 0 12px 7px 0; 
 
    position: relative; 
 
} 
 

 
#gallery img{ 
 
    width:100%; 
 
    border-radius:5% 
 
} 
 

 

 

 
.pageFour{ 
 
    background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-repeat: none; 
 
    background-size: cover; 
 
height: 1000px; 
 
padding-top:5%; 
 
background-attachment: fixed; 
 
}
<html> 
 
    <head> 
 
<title>Daniel's Portfolio | Welcome</title> 
 
<link rel="stylesheet" href="CSS/bootstrap.min.css"> 
 
<link rel="stylesheet" href="CSS/style.css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="CSS/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="main.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 
<div class="pageOne text-center"> 
 
    <ul class = "nav nav-pills"> 
 
<li> 
 
    <a href="#">Daniel Collins</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p4">Contact Me</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p3">Portfolio</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p2">About Me</a> 
 
</li> 
 
</ul> 
 

 
<div class="block text-center"> 
 
<h1>Daniel's Portfolio Website</h1> 
 
<h2>Various Web Projects</h2> 
 
</div> 
 
<div class = "btnList text-center"> 
 
    <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a> 
 
    <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a> 
 
    <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a> 
 
    <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a> 
 
</div> 
 
</div> 
 
<div class= "pageTwo text-center" id="p2"> 
 
<div class= "pageTwoblock"> 
 
<div class="row"> 
 
<div class ="text-center"> 
 
     <h2>Daniel Collins</h2> 
 
<div class="boxed"> 
 
     <p> 
 
     I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many 
 
     different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering 
 
     (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design. 
 
</p> 
 
</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
<div class= "pageThree" id="p3"> 
 
<header> 
 
<div class="block text-center"> 
 
    <h1 class = "logo">Portfolio</h1> 
 
</div> 
 
</header> 
 
<section> 
 
<div class="container"> 
 
    <h1 id="heading">Projects</h1> 
 
    <ul id="gallery"> 
 
    <li data-title="Project 1" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 2" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 3" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 4" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 5" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 6" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 7" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 8" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    </ul> 
 
</div> 
 
</section> 
 
</div> 
 
<div class= "pageFour text-center" id="p4"> 
 

 
</div> 
 
    </body> 
 
</html>

來源

2017-07-29 Daniel

回答

1

$(this).children('overlay') jQuery的，CSS和HTML是錯在你的代碼中，有一個由名稱的覆蓋沒有標籤，你要選擇具有類覆蓋的元素，所以你需要使用.overlay。

$(document).ready(function() { 
 

 
    //mouseenter overlay 
 
    $('ul#gallery li').on('mouseenter', function() { 
 

 
    // Get data attribute values 
 
    var title = $(this).children().data('title'); 
 
    var desc = $(this).children().data('desc'); 
 

 
    //validation 
 
    if (desc == null) { 
 
     desc = 'Click To Enlarge'; 
 
    } 
 

 
    if (title == null) { 
 
     title = ''; 
 
    } 
 

 
    //Create overlay div 
 
    $(this).append('<div class="overlay"></div>'); 
 

 
    //Get the overlay div 
 
    var overlay = $(this).children('.overlay'); 
 

 
    // Add html to overlay 
 
    overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>'); 
 

 
    // Fade in overlay 
 
    overlay.fadeIn(800); 
 
    }); 
 

 
    $('ul#gallery li').on('mouseleave', function() { 
 

 
    //Create overlay div 
 
    $(this).append('<div class="overlay"></div>'); 
 

 
    //Get the overlay div 
 
    var overlay = $(this).children('.overlay'); 
 

 
    //Fade out overlay 
 
    overlay.fadeOut(500); 
 
    }); 
 

 
});
body{ 
 
    background-color: white; 
 
    font-family:Orbitron; 
 
    color:white; 
 
} 
 

 
.fa-stack-overflow{ 
 
color: #f48024 
 
} 
 

 
.fa-github{ 
 
color:rgb(102,43,129); 
 
} 
 

 
.fa-linkedin{ 
 
color:rgb(0,127,178); 
 
} 
 

 
.fa-facebook-official{ 
 
color:rgb(59, 89, 153); 
 
} 
 

 
.nav-pills{ 
 
font-size: 1.7em; 
 
background-color: none; 
 
margin-bottom: 10%; 
 
} 
 

 

 
.block{ 
 
    background-color: #337ab7; 
 
    opacity: .7; 
 
    padding:10px; 
 
    width:50%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    border-radius:5px; 
 
} 
 

 

 
h1{ 
 
    padding:0; 
 
margin-top: 0px; 
 
font-size: 5.0em; 
 
} 
 

 
.btn-default{ 
 
font-size:1.7em; 
 
color:#337ab7; 
 
} 
 

 

 
.pageOne{ 
 
    background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-repeat: none; 
 
    background-size: cover; 
 

 
    height: 1000px; 
 

 
} 
 

 
/* 
 
parallax effect start 
 
*/ 
 
.pageOne, .pageThree{ 
 
position: relative; 
 
background-position: center; 
 
background-size: cover; 
 
background-repeat: no-repeat; 
 
background-attachment: fixed; 
 
} 
 

 

 

 
/* 
 
parallax effect end 
 
*/ 
 

 
.pageTwo{ 
 
background: white; 
 
color:#337ab7; 
 
background-repeat: none; 
 
background-size: cover; 
 
height: 400px; 
 
padding-top: 5%; 
 
background-attachment: fixed; 
 
} 
 

 
.pageTwoblock{ 
 
border-radius:5px; 
 
} 
 

 
.boxed{ 
 
    font-size: 1.7em; 
 
text-align: center; 
 
margin-right: auto; 
 
margin-left: auto; 
 
} 
 

 

 

 

 
.me{ 
 
height: 850px; 
 
    display:block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 

 
} 
 

 
.pageThree{ 
 
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
background-repeat: none; 
 
background-size: cover; 
 
height: 1000px; 
 
padding-top:5%; 
 
background-attachment: fixed; 
 
} 
 

 
.container{ 
 
    width:80%; 
 
    margin:auto; 
 
    overflow:auto; 
 
} 
 

 
section{ 
 
    padding:20px 0; 
 
    overflow:hidden; 
 
} 
 

 
#gallery{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#gallery li{ 
 
    display: block; 
 
    float: left; 
 
    width: 23%; 
 
    cursor: pointer; 
 
    border: 5px; 
 
    box-sizing: border-box; 
 
    margin: 0 12px 7px 0; 
 
    position: relative; 
 
} 
 

 
#gallery img{ 
 
    width:100%; 
 
    border-radius:5% 
 
} 
 

 

 

 
.pageFour{ 
 
    background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-repeat: none; 
 
    background-size: cover; 
 
height: 1000px; 
 
padding-top:5%; 
 
background-attachment: fixed; 
 
}
<html> 
 
    <head> 
 
<title>Daniel's Portfolio | Welcome</title> 
 
<link rel="stylesheet" href="CSS/bootstrap.min.css"> 
 
<link rel="stylesheet" href="CSS/style.css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="CSS/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="main.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 
<div class="pageOne text-center"> 
 
    <ul class = "nav nav-pills"> 
 
<li> 
 
    <a href="#">Daniel Collins</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p4">Contact Me</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p3">Portfolio</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p2">About Me</a> 
 
</li> 
 
</ul> 
 

 
<div class="block text-center"> 
 
<h1>Daniel's Portfolio Website</h1> 
 
<h2>Various Web Projects</h2> 
 
</div> 
 
<div class = "btnList text-center"> 
 
    <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a> 
 
    <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a> 
 
    <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a> 
 
    <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a> 
 
</div> 
 
</div> 
 
<div class= "pageTwo text-center" id="p2"> 
 
<div class= "pageTwoblock"> 
 
<div class="row"> 
 
<div class ="text-center"> 
 
     <h2>Daniel Collins</h2> 
 
<div class="boxed"> 
 
     <p> 
 
     I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many 
 
     different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering 
 
     (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design. 
 
</p> 
 
</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
<div class= "pageThree" id="p3"> 
 
<header> 
 
<div class="block text-center"> 
 
    <h1 class = "logo">Portfolio</h1> 
 
</div> 
 
</header> 
 
<section> 
 
<div class="container"> 
 
    <h1 id="heading">Projects</h1> 
 
    <ul id="gallery"> 
 
    <li data-title="Project 1" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 2" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 3" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 4" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 5" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 6" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 7" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    <li data-title="Project 8" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li> 
 
    </ul> 
 
</div> 
 
</section> 
 
</div> 
 
<div class= "pageFour text-center" id="p4"> 
 

 
</div> 
 
    </body> 
 
</html>

來源

2017-07-29 04:06:48 Dij

相關問題

 相關問題