2015-10-19 68 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."); 
}); 
相關問題