blocks|key|2190154|text|你应该试试这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2190155|​|2190156|var+$box_each+=+$(".boxes+img");

$box_each.click(function()+{
++if+($(this).hasClass("clicked"))+{
++++$(this).addClass("unclicked");
++++$(this).removeClass("clicked");
++}+else+{
++++$(this).removeClass("unclicked");
++++$(this).addClass("clicked");
++++$box_each.css("opacity",+"0.2");
++++$(this).css("opacity",+"1");
++}
});|code-block|syntax|javascript|2190157|.boxes+img+{
++opacity:+0.2;
}
.boxes+img:hover+{
++opacity:+1;
}
.clicked+{
++opacity:+1+!important;
}
.unclicked+{
++opacity:+0.2+!important;
}|2190158|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div+class="boxes">
++<img+src="http://lorempixel.com/50/50/">
++<img+src="http://lorempixel.com/50/50/">
++<img+src="http://lorempixel.com/50/50/">
++<img+src="http://lorempixel.com/50/50/">
</div>|2190159|2190160|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You should try this. </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var $box_each = $(".boxes img");

$box_each.click(function() {
  if ($(this).hasClass("clicked")) {
    $(this).addClass("unclicked");
    $(this).removeClass("clicked");
  } else {
    $(this).removeClass("unclicked");
    $(this).addClass("clicked");
    $box_each.css("opacity", "0.2");
    $(this).css("opacity", "1");
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.boxes img {
  opacity: 0.2;
}
.boxes img:hover {
  opacity: 1;
}
.clicked {
  opacity: 1 !important;
}
.unclicked {
  opacity: 0.2 !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="boxes"&gt;
  &lt;img src="http://lorempixel.com/50/50/"&gt;
  &lt;img src="http://lorempixel.com/50/50/"&gt;
  &lt;img src="http://lorempixel.com/50/50/"&gt;
  &lt;img src="http://lorempixel.com/50/50/"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1589125|text|单击后，您的悬停效果无法工作，因为您在Jquery中提供内联样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589126|您可以这样做：|1589127|var+$box_each+=+$(".boxes+img");

$box_each.click(function()+{
++++++++$box_each.removeClass('active');
++++++++$(this).addClass('active');
++++});|code-block|syntax|javascript|1589128|Css：|1589129|.boxes+img+{
++opacity:+0.2;
}

.boxes+img:hover+{
++opacity:+1;
}

.boxes+img.active+{
++opacity:+1;
}|1589130|演示|offset|length|1589131|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/jWrWvd^0|0|0|0|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Your hover effect is not working after clicking because you are giving inline styling in Jquery.</p>

<p>You can do something like following:</p>

<pre><code>var $box_each = $(".boxes img");

$box_each.click(function() {
        $box_each.removeClass('active');
        $(this).addClass('active');
    });
</code></pre>

<p>Css:</p>

<pre><code>.boxes img {
  opacity: 0.2;
}

.boxes img:hover {
  opacity: 1;
}

.boxes img.active {
  opacity: 1;
}
</code></pre>

<p><a href="http://codepen.io/anon/pen/jWrWvd" rel="nofollow"><strong>DEMO</strong></a></p>


blocks|key|2747471|text|如果您想保留不透明度效果，以便申请多幅图像，我想您可以尝试这样的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2747472|HTML：|2747473|<div+id="boxes">
++<img+class="boxes-normal"+src="http://lorempixel.com/50/50/">
++<img+class="boxes-normal"+src="http://lorempixel.com/50/50/">
++<img+class="boxes-normal"+src="http://lorempixel.com/50/50/">
++<img+class="boxes-normal"+src="http://lorempixel.com/50/50/">
</div>|code-block|syntax|javascript|2747474|css：|2747475|.boxes-normal{
++opacity:+0.2;
}

.boxes-normal:hover+{
++opacity:+1;
}

.boxes-opaque{
++opacity:+1;
}|2747476|JavaScript：|2747477|var+$box_each+=+$("#boxes+img");

$box_each.click(function()+{
++++if($(this).hasClass('boxes-normal')){
++++++$(this).removeClass('boxes-normal');
++++++$(this).addClass('boxes-opaque');
++++}+else+if($(this).hasClass('boxes-opaque')){
++++++$(this).removeClass('boxes-opaque');
++++++$(this).addClass('boxes-normal');
++++}
++++});|2747478|希望这有帮助..。|2747479|演示|offset|length|2747480|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/NxrxLO^0|0|0|0|0|0|0|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$U|1D|V|1E|1|1F]]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>if you want to retain the opacity effect so as to apply for multiple images, I think you can try something like this.</p>

<h3>HTML:</h3>

<pre><code>&lt;div id="boxes"&gt;
  &lt;img class="boxes-normal" src="http://lorempixel.com/50/50/"&gt;
  &lt;img class="boxes-normal" src="http://lorempixel.com/50/50/"&gt;
  &lt;img class="boxes-normal" src="http://lorempixel.com/50/50/"&gt;
  &lt;img class="boxes-normal" src="http://lorempixel.com/50/50/"&gt;
&lt;/div&gt;
</code></pre>

<h3>css:</h3>

<pre><code>.boxes-normal{
  opacity: 0.2;
}

.boxes-normal:hover {
  opacity: 1;
}

.boxes-opaque{
  opacity: 1;
}
</code></pre>

<h3>JavaScript:</h3>

<pre><code>var $box_each = $("#boxes img");

$box_each.click(function() {
    if($(this).hasClass('boxes-normal')){
      $(this).removeClass('boxes-normal');
      $(this).addClass('boxes-opaque');
    } else if($(this).hasClass('boxes-opaque')){
      $(this).removeClass('boxes-opaque');
      $(this).addClass('boxes-normal');
    }
    });
</code></pre>

<p>Hope this helps..</p>

<p><a href="http://codepen.io/anon/pen/NxrxLO" rel="nofollow">DEMO</a></p>


<p>I have four button elements that have hover styling (from 0.2 opacity to 1 opacity). And then, I am using jQuery so that after clicking the specific button, its opacity becomes 1 (sort of a marker that it's the clicked button) and the other unclicked buttons have an opacity of 0.2.</p>

<p>However, after clicking, since I have forced every unclicked button to have opacity of 0.2, the css hover styling no longer works.</p>

<p>I created a codepen demo below:</p>

<p>jQuery:</p>

<pre><code>var $box_each = $(".boxes img");
    $box_each.click(function() {
        $box_each.css("opacity", "0.2");
        $(this).css("opacity", "1");
    });
</code></pre>

<p><a href="http://codepen.io/aguerrero/pen/Bjzjrx" rel="nofollow">http://codepen.io/aguerrero/pen/Bjzjrx</a></p>

<p>How do I resolve this issue so that the hover styling for all is retained while having just one element that has opacity of 1 at any given time?</p>


How to keep hover styling even after an element is clicked? (jQuery)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有四个按钮元素具有悬停样式(从0.2不透明度到1不透明度)。然后，我使用jQuery，以便在单击特定按钮后，其不透明度变为1(某种程度上是单击按钮的标记)，而其他未单击按钮的不透明度为0.2。但是，单击之后，由于我强制每个未单击按钮都具有0.2的不透明度，css悬停样式不再工作。我在下面创建了一个代码演示：jQuer...

问如何保持悬停样式，即使在一个元素被点击后？(jQuery)
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何保持悬停样式，即使在一个元素被点击后？(jQuery)EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何保持悬停样式，即使在一个元素被点击后？(jQuery)
EN