我正在尝试使用jQuery创建效果,当用户将鼠标悬停在图像上时,在图像上会出现一段文字。但是,对代码进行更改时会遇到一些问题。
如果将jQuery第3行上的“ .img”替换为“ img”,则代码可以正常工作,但会导致悬停效果在其他图像上起作用
如果我在“不透明度:0.75”之后删除分号,在jQuery的第4行上,代码暂时可用,但是与页面的任何其他交互都会导致效果中断
抱歉,代码有点冗长。
工作的JSFiddle:https ://jsfiddle.net/9dsL2jyL/3/
我的代码:
的HTML
<div class="workInfo">
<!-- Nav bar open icon -->
<img src="images/icons/navbar.png" id="hamburger" alt="Navigation Menu" onclick="openNav()">
<!-- Nav bar links -->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()" alt="Close the Navigation Menu">×</a>
<a href="index.html" class="toplink" alt="Home">Home</a>
<a href="about.html" alt="About">About</a>
<a href="portfolio.html" alt="Portfolio">Portfolio</a>
<a href="#" alt="Contact ">Contact</a>
<!-- Facebook Link -->
<a href="#" id="facebook" alt="Facebook Page Link">
<div class="container">
<img src="images/icons/facebookHover.png">
<img class="fadeTop" src="images/icons/facebook.png" style="display: block;">
</div>
</a>
<!-- Instagram Link -->
<a href="#" id="instagram" alt="Instagram Page Link">
<div class="container">
<img src="images/icons/instagramhover.png">
<img class="fadeTop" src="images/icons/instagram.png">
</div>
</a>
<!-- Github Link -->
<a href="#" id="github" alt="Github Page Link">
<div class="container">
<img src="images/icons/githubhover.png">
<img class="fadeTop" src="images/icons/github.png">
</div>
</a>
</div>
<h1>Work</h1>
</div>
<div class="workDisplay">
<a href="#">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</a>
</div>
的CSS
.sidenav {
/* Sets the height to 100% of the page */
height: 100%;
/* Sets the width of the nav bar to 0 */
width: 0;
/* Keeps the nav bar stationary */
position: fixed;
/* Makes the nav bar appear above everything */
z-index: 10;
/* Nav bar Placement stuff */
top: 0;
left: 0;
/* Sets the colour of the nav bar background */
background-color: #141311;
/* Disables horizontal scroll in the nav bar */
overflow-x: hidden;
/* Adds padding above the content */
padding-top: 3%;
/* Adds 0.5 second transition effect to slide in the nav bar */
transition: 0.5s;
}
/* The navigation menu links */
.sidenav a {
/* Sets the font */
font-family: "purista-web",sans-serif;
font-style: normal;
font-weight: 300;
/* Adds padding around the links */
padding: 1vh 1vw 1vh 2vw;
/* Removes all text decoration */
text-decoration: none;
/* Sets the size of the font */
font-size: 1.75vw;
/* Sets the colour of the font */
color: #B8B8B4;
/* Makes the text appear in a block */
display: block;
/* Adds a 0.3s transition to the hover effect */
transition: 0.3s
}
/* Styling for the social media links */
.container {
position: relative;
width: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 5vw;
}
/* Changes the colour when you hover over the link */
.sidenav a:hover, .offcanvas a:focus{
color: #FEFEFA;
}
/* Styling for the top link of the nav bar */
.toplink {
margin-top: 10vh;
}
/* Position and style the close button (top right corner) */
.closebtn {
position: absolute;
top: -4.5vh;
font-size: 8vw !important;
}
/* Styling for the left half of the portfolio page */
.workInfo {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
left: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #FEFEFA;
z-index: 5;
}
/* Styling for Work */
.workInfo h1 {
/* Sets the font */
font-family: "marydale",sans-serif;
font-style: normal;
font-weight: 400;
/* Sets the size of the font */
font-size: 8vw;
/* Sets the positioning for the text */
position: fixed;
top: 50%;
left: 50%;
margin-top: -13vh;
margin-left: -34vw;
/* Sets the colour of the type */
color: #141311;
}
.workInfo #hamburger {
width: 3vw;
position: absolute;
left: 5%;
top: 5.5%;
}
/* Styling for the right half of the portfolio page */
.workDisplay {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #141311;
line-height: 100%;
z-index: 4;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.workDisplay #container {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
}
.workDisplay h2 {
color: #FEFEFA;
/* Sets the typeface */
font-family: "skolar-sans-latin",sans-serif;
/* Makes the font italic */
font-style: italic;
/* Makes the font Bold */
font-weight: 700;
/* Sets the size of the type */
font-size: 3vw;
margin-top: 48vh;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 14;
}
.workDisplay img {
display: block;
height: 100vh;
min-height: 100vh;
width: auto;
z-index: 10;
}
jQuery的
/* Hover effect for the nav bar */
$(window).load(function(){
$(".container").hover(function() {
//Adds a fade out of 300ms to the top image
$(this).find(".fadeTop").fadeOut(300);
}, function() {
//Adds a fade in of 300ms to the top image
$(this).find(".fadeTop").fadeIn(300);
});
})
/* Hover effect for the span's on the work page */
$(document).ready(function() {
$('.text').hide();
$('.img').animate({
opacity: 0.75
});
$('.img').hover(function() {
$(this).stop().animate({opacity:.4},200);
$('.text').fadeIn();
}, function() {
$(this).stop().animate({opacity:1},500)
$('.text').fadeOut();
});
对于以后阅读此文档的任何人,我发现workDisplay div中图像周围的标签引起了该问题,因为从我的代码中删除该标签后,悬停效果非常好。
HTML之前:
<div class="workDisplay">
<a href="#">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</a>
</div>
HTML之后:
<div class="workDisplay">
<!-- Div to store the text for hover -->
<div id="container">
<!-- Text that appears on hover -->
<h2 class="text">
A Play On Words
</h2>
</div>
<!-- Project image -->
<img class="img" src="images/cardphoto.jpg">
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句