来自一个 JS 菜鸟的快速问题。
在一个网站上，我有一张基本上由两部分组成的产品图像，然后有一排小的 .png 缩略图 .colorthumbnail这些具有透明背景的单独部分。在 CSS 中，我将其设置为当悬停缩略图时，它会启用 .colorzoom使用 position: absolute 在原始产品图片上覆盖相同颜色选项的大版本的类.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
<div class="j210desertsand">类就在那里，因此我可以使用 CSS 轻松隐藏单个颜色选项，并且下一个颜色将排列起来。 anchor 的存在是因为经过一些研究，我发现我实际上应该使缩略图可点击，并且带有 a href="javascript:void(0)"它们实际上并不链接到任何地方或重新加载页面。
CSS:(请原谅我的困惑，我没有经验)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
现在这似乎工作正常，但因为有两个不同的部分，我想让用户能够组合颜色选项，显然你不能同时将鼠标悬停在两个图像上。经过更多研究后，我发现我需要 Javascript 来强制 :hover点击时的状态。但说实话，我不知道自己在做什么。这就是我所拥有的:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
但是这似乎不起作用。我在 <head> 中获得了链接脚本吗？正确的？它在“Hello World”弹出测试中运行良好。我在脚本中得到的类(class)正确吗？我有点卡住了，我们将不胜感激!对社区充满热爱。
最佳答案
尝试添加这样的代码:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
当尝试使用 jquery 时，您需要确保页面已加载，以便它可以执行 dom 操作。
来源:https://api.jquery.com/ready/
这是一个 jsFiddle 演示:https://jsfiddle.net/Lv571n1w/
如果您检查元素，您可以看到它在单击时切换类。
关于javascript - 单击时强制悬停状态辅助元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43453235/