Question

我具有此功能，我希望它在悬停时显示一些文本并更改背景颜色，我该怎么做？我还应该用txt在html中创建div吗？ js函数应如何显示？

18.03.0-ce

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

Answer 1

您的代码存在一些问题（大部分只是类和ID的混合）。

首先，product-mouseover应该不是是ID。应该是一个类（您在javascript中似乎正确）。

在CSS中，mouseover应该应用于 class 鼠标悬停，而不是 not 和 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>

我的悬停功能显示不起作用，为什么？

1 个答案: