jQuery - 将鼠标悬停在一个元素上以更改两个不同的元素

Question

我有一个网站，其中包含一个图像网格，右侧有一个简单的文本框。框内是h3和p元素。当鼠标悬停在特定图像上时，我希望h3和p能够改变。目前h3没有问题地改变，但是p文本仅在鼠标离开所述图像时才改变。

网站：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 tieman64@hotmail.com. 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.");
});

Answer 1

这样做是这样的。我在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.");
});

Answer 2

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

$('.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.");
});