gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 00:54:21 24 4
gpt4 key购买 nike

我有这个功能,我想让它在悬停时显示一些文本并更改背景颜色,我该怎么做?我还应该用 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>

最佳答案

您的代码存在一些问题(主要是类和 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>

关于javascript - 我的 reveal on hover 功能不起作用,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55147557/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com