单击时强制悬停状态辅助元素答案

【问题标题】：Force hover state secondary element on click单击时强制悬停状态辅助元素
【发布时间】：2017-04-17 14:16:01
【问题描述】：

来自一个完整的 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">classes 就在那里，所以我可以使用 CSS 轻松隐藏单一颜色选项，并且下一个颜色将对齐。锚点之所以存在，是因为经过一些研究，我发现我实际上应该使缩略图可点击，并且 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”弹出式测试中运行良好。我得到脚本中的类了吗？我有点卡住了，我们将不胜感激！非常热爱社区。p>

【问题讨论】：

标签： javascript jquery css hover click

【解决方案1】：

尝试像这样添加您的代码：

$( document ).ready(function() {
  $("#colorpicker").click(function() {
    $('.colorthumbnail:hover')
     .toggleClass('colorthumbnail:hover.colorzoom');
  });
});

在尝试使用 jquery 时，您需要确保页面已加载，以便它可以执行 dom 操作。

来源：https://api.jquery.com/ready/

这是一个 jsFiddle 演示：https://jsfiddle.net/Lv571n1w/

如果您检查元素，您可以看到它在单击时切换类。

【讨论】：

感谢您的回复，尽管这似乎无法解决我的问题。即使在 jsfiddle 中，单击 .colorthumbnail 并将光标移开后，.colorzoom 再次消失（因为它仅在 .colorthumbnail:hover 处于活动状态时显示。我认为问题只是我的 js 代码错误，但我不能t 为我的一生找出原因. 这是我第一次在一个简单的教程之外使用 jquery !
@Feronix 你点击小提琴上的运行按钮了吗？因为它对我来说按预期工作。
抱歉回复晚了。是的，我做到了，但是悬停后图像的更大版本不会保留。我最终能够通过使用$("#colorpicker").click(function() { 让它工作，但它使它的缩略图随着缩放图像的出现而消失。我现在已经放弃并决定使用两个不同的 jquery（显然这在一个页面上比在两个相同的页面上更容易使用）用作顶行和底行，而放大的图像在缩略图行之间加载。无论如何感谢您的帮助，我很感激！