2015-10-19 66 views
-1

我有一个网站,其中包含一个图像网格,右边有一个简单的文本框。盒子里有一个h3和p元素。当悬停在特定图像上时,我想让h3和p改变。目前,h3的变化没有问题,但只有当鼠标离开所述图像时,p文本才会改变。jQuery - 将鼠标悬停在一个元素上以更改两个不同的元素

网站:https://crux.baker.edu/~evolme01/responsive%20web%20test/home.html

将鼠标悬停在例如顶端左侧的第一个图像。 h3将变为EYES WIDE SHUT,但p文字只会在您将鼠标移出时才会更改。当您将鼠标悬停在标题上时也会发生同样的情况。我怎样才能让他们同时改变?

相关的HTML:

<div id="grid"> 

    <div class="grid-element" id="ews"> 
     <a href="#"><img src="img/ews.jpg"/></a> 
     <span></span> 
    </div> 

<div class="right-content"> 
      <h3>THE KUBRICK CORNER</h3> 
       <p>This website deals with exploring the works of Stanley Kubrick, one of the most widely praised yet continuously misunderstood film directors of the 20th century. 
       If you wish to submit an article, please email me at [email protected] All submissions are welcomed. Thank you to everyone who has contributed. 
     </p> 
      </div> 

相关的CSS:

#grid{ 
width: 450px; 
margin: 0px 0px 0px 0px; 

} 

.grid-element { 
    width:132px; 
    height: 132px; 
    float:left; 
    /*padding: 0px 50px 25px 0px;*/ 

} 

.grid-element img { 
    width:126px; 
    height: 126px; 
    opacity: 1; 
    border: 5px solid rgba(255 ,255 ,255 ,0.5); 
     } 

     .grid-element img:hover { 
     } 

.right-content { 
    float: right; 
    width: 500px; 
    height: 255px; 
    background-color: rgba(0, 0, 0, 0.6); 
    margin-right: 5%; 
    margin-top: 65px; 
    display: block; 
    font-family: Helvetica,sans-serif; 
    border: 1px solid rgba(255, 255, 255, 0.3); 
} 

.right-content h3 { 

    text-align: center; 
    margin:0px; 
    font-family: 'Oswald', sans-serif; 
} 

.right-content p { 

    text-align: left; 
    padding: 5px; 
    font-size: smaller; 
    font-family: 'Oswald', sans-serif; 
} 

如何,我用jQuery做它:

$('.grid-element#ews').hover(function() { 
    $('.right-content h3').text("EYES WIDE SHUT"); 
} , function() { 
    $('.right-content p').text("After Dr. Bill Hartford's wife, Alice, admits to having sexual fantasies about a man she met, Bill becomes obsessed with having a sexual encounter. He discovers an underground sexual group and attends one of their meetings -- and quickly discovers that he is in over his head."); 
}); 

回答

2

反而这样做。我在console

$('.grid-element#ews').hover(function() { 
    $('.right-content h3').text("EYES WIDE SHUT"); 
    $('.right-content p').text("After Dr. Bill Hartford's wife, Alice, admits to having sexual fantasies about a man she met, Bill becomes obsessed with having a sexual encounter. He discovers an underground sexual group and attends one of their meetings -- and quickly discovers that he is in over his head."); 
}); 
+1

谢谢。这解决了它。认为它必须分开。 – ev88

0

为什么不把它们放在一起?

$('.grid-element#ews').hover(function() { 
    $('.right-content h3').text("EYES WIDE SHUT"); 
    $('.right-content p').text("After Dr. Bill Hartford's wife, Alice, admits to having sexual fantasies about a man she met, Bill becomes obsessed with having a sexual encounter. He discovers an underground sexual group and attends one of their meetings -- and quickly discovers that he is in over his head."); 
}); 
相关问题