Javascript Mouseover和Mouseout的行为不符合预期

正在尝试使用这些jQuery方法在其描述的图像悬停时显示描述。。。。如果我不将description display设置为none，那么它会起到一定的作用，在这种情况下，文档首先显示所有描述，然后在我鼠标悬停和鼠标悬停时显示和隐藏它们（所有描述）。但我希望在第一次鼠标滑过之前将描述隐藏起来。我也有一个问题，匹配图像/描述悬停到每个实例。我是OOP新手，但我想这会在这里派上用场。无论如何，任何提示都是非常感谢的

这是我的密码：

$（'.image'）.mouseover（函数（）{
$（'.description'）.show（）；
})
$（'.image'）.mouseout（函数（）{
$（'.description'）.hide（）；
})

.col-lg-3 h2{
字体大小：1.1米；
颜色：黑色；
字体系列：“Arial”；
左边距：.1米；
字号：500；
显示：无；
}
.col-lg-3 p{
字体大小：.9em；
左侧边缘：.2em；
边缘顶部：-.3em；
字体大小：400；
显示：无；

在下面签出解决方案

JS部分：更改jQuery选择器

CSS部分：无更改

HTML部分：添加正确的结尾

测验
猜谜游戏

不要使用鼠标器和鼠标开关。在使用这些功能时，有很多事情需要考虑。我建议你使用悬停功能。

$('.image').hover(function() { $('.description').show(); }, function() { $('.description').hide(); });

第一个参数是鼠标悬停时执行的函数，第二个参数是鼠标悬停时执行的函数。
你能把它放到JSFIDLE中并共享吗？@jQuery.PHP.Magento.com修复：）
我是OOP新手，OOP在哪里？你根本没有使用javascript，它只是jQuery而已。@Hiteshidhapura Sweet。解决了一半。仍然需要图out我应该如何使用。这是为了一次只显示正确的描述。现在，每当我将鼠标悬停在任何图像上时，它都会显示所有描述。@Hiteshidhapura，太棒了，谢谢。请阅读OP的问题
我没有将描述显示设置为无，
@jQuery.PHP.Magento.com是的，我已经删除了css部分，它工作正常但问题是你的css。我已经解决了。请检查
.col-lg-3 h2 {
  font-size: 1.1em;
  color: black;
  font-family: 'Arial';
  margin-left: .1em;
  font-weight: 500;
  display: none;

}

.col-lg-3 p {
  font-size: .9em;
  margin-left: .2em;
  margin-top: -.3em;
  font-weight: 400;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 ye">
            <a class = "image" href="targethere" target="_blank"> <img width="10%" height="10%" src="http://srdtu.org/assets/img/events/quiz-.jpg.jpg" alt="quiz"></a> 
            <div class = "description">
            <h2> quiz </h2> 
            <p> a quote guessing game </p>
            </div>
      </div>

$('.image').hover(function() { $('.description').show(); }, function() { $('.description').hide(); });