jQueryはページ上に希望の出力を生成していません

Question

私はjQueryにはかなり新しく、私のポートフォリオのWebサイトでそれを使用しようとしています。私のポートフォリオギャラリーのウィンドウ上にマウスを置いても、私がこれを試してみると、コードが出力を生成しているはずです...何も起こりません。私は誰かが私が行方不明であることを知っていたのか、これを引き起こしていることを正しくしていないのか疑問に思いました

の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>

Answer 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>