只有在悬停时才显示文字

Question

我正在尝试使用jQuery创建一个效果，当用户将鼠标悬停在图像上时，图像上会出现一段文字。但是，在更改代码时存在一些问题。

1. 如果jQuery第3行的“.img”替换为“img”，代码工作正常，但会导致悬停效果在不同的图像上工作

2. 如果我在“不透明度：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">&times;</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();
    });

Answer 1

使用 JQuery ，可以按图像元素$("img")或图像$(".imageclass")和$("#imageid")的类或ID选择图像。

在您的情况下，您可以为要通过JQuery animate函数选择的图像提供其他类。然后该函数将仅影响仅具有该类的图像。希望这说清楚。

$(".imageclass").animate({ opacity: 0.75; });

Answer 2

尽量不要使用JS
当它可以通过Css解决时

html,body{
  height: 100%;
  margin: 0;
}

.box{
  width: 100%;
  height: 100%;
  font-size: 0;
}
.box-item{
  display: inline-block;
  width: 50%;
  height: 100%;
  font-size: 16px;
  position: relative;
}
.box-item:hover .box-item-text{
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}
.box-item:hover .box-item-img{
  opacity: .8;
  -webkit-filter: blur(3px);
	filter: blur(3px);
  // http://caniuse.com/#search=filter%3A%20blur
}
.box-item-text{
  font-size: 30px;
  color: white;
  text-align: center;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(0, -50%) scale(.5);
  opacity: 0;
  transition: all 500ms linear;
}
.box-item-img{
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  // or background-size: cover !important;
  background-size: 100% 100% !important;
  -webkit-filter: blur(0px);
	filter: blur(0px);
  transition: all 500ms linear; 
}

<div class="box">
  <div class="box-item">
    <div class="box-item-text">Lorem ipsum.</div>
    <div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
  </div>
  <div class="box-item">
    <div class="box-item-text">Lorem ipsum.</div>
    <div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
  </div>
</div>
            

Answer 3

对于之后阅读此内容的任何人，我发现workDisplay div中图像周围的标记导致了问题，因为从我的代码中删除此标记时，悬停效果完美无缺。

HTML之前：

            if(points.begin()+i+m <= points.end()) {
                chunk.assign(points.begin()+i,points.begin()+i+m); 
            }
            else {
                chunk.assign(points.begin()+i,points.end()); 
            }         
            hulls.push_back(this->graham_scan(chunk)); // Outside if / else

HTML After：

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