除非单击第二个按钮，否则仅保持悬停背景图像处于活动状态(Keep hover background image active only unless second button is clicked)

除非单击第二个按钮，否则仅保持悬停背景图像处于活动状态(Keep hover background image active only unless second button is clicked)

我有两个按钮（每个按钮都带有灰色背景图像），每个按钮都有一个颜色悬停背景图像。 除非单击旁边的按钮，否则我只想保持颜色背景处于活动状态。 现在，如果您点击屏幕上的任何位置，该背景悬停图像的焦点将恢复为原始的灰色按钮/图像。

这是CSS的小提琴： http ： //jsfiddle.net/J6DP9/8/

<div class="buttons-holder"> <button id="rdb1" type="button" name="toggler" value="US">United States</button> <button id="rdb2" type="button" name="toggler" value="International">International</button> </div> </div> </div> <div class="cms-pages"> <div class="divclearboth"></div> <hr> </div> <div id="blk-0" class="toHide"> <div class="center-form-img"> <img src="{{media url=" wysiwyg/form-inactive.jpg "}}" alt="" /> </div> </div> <div id="blk-US" class="toHide" style="display:none;">{{block type=core/template name=wholesale-us template=cmg/wholesale-us.phtml}}</div> <div id="blk-International" class="toHide" style="display:none;">{{block type=core/template name=wholesale-intl template=cmg/wholesale-intl.phtml}}</div>

这是JS：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function () { $("[name=toggler]").click(function () { $('.toHide').hide(); $("#blk-" + $(this).val()).fadeIn(); }); }); </script>

任何帮助深表感谢！ 提前致谢。

I have two buttons (each with grey background image), and for each of those a color hover background image. I'd like to keep the color background active only unless the button next to it is clicked. Right now if you click anywhere on the screen the focus of that background hover image reverts back to the original grey button/image.

Here's the fiddle with the CSS: http://jsfiddle.net/J6DP9/8/

<div class="buttons-holder"> <button id="rdb1" type="button" name="toggler" value="US">United States</button> <button id="rdb2" type="button" name="toggler" value="International">International</button> </div> </div> </div> <div class="cms-pages"> <div class="divclearboth"></div> <hr> </div> <div id="blk-0" class="toHide"> <div class="center-form-img"> <img src="{{media url=" wysiwyg/form-inactive.jpg "}}" alt="" /> </div> </div> <div id="blk-US" class="toHide" style="display:none;">{{block type=core/template name=wholesale-us template=cmg/wholesale-us.phtml}}</div> <div id="blk-International" class="toHide" style="display:none;">{{block type=core/template name=wholesale-intl template=cmg/wholesale-intl.phtml}}</div>

Here's the JS:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function () { $("[name=toggler]").click(function () { $('.toHide').hide(); $("#blk-" + $(this).val()).fadeIn(); }); }); </script>

Any help is much appreciated! Thanks in advance.

最满意答案

我更新了您的代码，将active类添加到最后一次单击的button并从所有其他类中删除active类。

http://jsfiddle.net/J6DP9/16/

I updated your code to add an active class to the last clicked button and remove the active class from all others.

http://jsfiddle.net/J6DP9/16/