所以我对jQuery很陌生，我试图在我的投资组合网站上使用它。从我可以告诉我的代码应该是当我将鼠标悬停在我的投资组合库窗口上时产生一些输出，但是当我尝试这个时......没有任何反应。我想知道是否有人知道我错过了什么或者没有正确做到这一点。
jQuery，CSS和HTML
$(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>
答案 0 :(得分：1)
$(this).children('overlay')代码错误，没有按名称覆盖的标记，您想要选择具有类叠加的元素，因此您需要使用.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>