javascript - 我的 reveal on hover 功能不起作用，为什么？

Question

我有这个功能，我想让它在悬停时显示一些文本并更改背景颜色，我该怎么做？我还应该用 txt 在 html 中创建 div 吗？ js 函数应该是什么样子？

$('.product-mouseover').mouseover(function() {
  (this).addClass('mouseover');
})

/*products*/

#products {
  padding-top: 100px;
  padding-bottom: 100px;
  width: 1000px;
  margin: auto;
}

#products p {
  text-align: center;
}

#products img {
  padding: 55px;
  margin: auto;
}

#mouseover {
  background: #1ada00;
  width: 100px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="products">
  <h1>Products</h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
  <img id="product-mouseover" src="images/001-malware.png" alt="">
  <img id="product-mouseover" src="images/002-smartphone.png" alt="">
</div>

Answer 1

您的代码存在一些问题(主要是类和 ID 的混淆)。

首先，product-mouseover 不应该是一个 ID。这应该是一个类(您在 javascript 中似乎是正确的)。

在您的 CSS 中，mouseover 应该应用于类 mouseover，不是 id。

最后，在您的 Javascript 中，将 (this) 更改为 $(this)。

$('.product-mouseover').mouseover(function() {
    $(this).addClass('mouseover');
})

/*products*/

#products {
    padding-top: 100px;
    padding-bottom: 100px;
    width: 1000px;
    margin: auto;
}

#products p {
    text-align: center;
}

#products img {
    padding: 55px;
    margin: auto;
}

.mouseover {
    background: #1ada00;
    width: 100px;
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="products">
                <h1>Products</h1>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
                <img class="product-mouseover" src="http://placehold.it/200" alt="">
                <img class="product-mouseover" src="http://placehold.it/200" alt="">
                </div>