Question

我在页面上有四个不同的按钮，每个按钮都位于与该按钮相关的产品描述下。这些按钮供用户点击自己喜欢的产品。当他们点击一个按钮时，最好为其他三个按钮提供叠加，或其他视觉效果，使其看起来像被禁止被选中。有一个简单的方法吗？也许用CSS或javascript？

我是Javascript的新手，非常感谢任何帮助!!谢谢！

2014年12月18日编辑：我道歉，让我添加一些代码。

HTML：

<div id="blue-btn-grades">THIS IS MY FAVE</div>

CSS：我有媒体查询，因此CSS可能因特定分辨率而异，但CSS下面则是我的17“电脑显示器。

#blue-btn-grades {
font-family: BigNoodle;
font-size: 18px;
color: #ffffff;
background-color: #3095b4;
margin-left: auto;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 40px;
border-radius: 5px;
width: 90px;
display: inline-block;
}

如果您还有其他需要，请告诉我！

更新：2014年2月18日 - 在我原来的帖子中，我说按钮但更具体地说，我希望这个叠加层应用于整个div。一个div的HTML如下：

<a name="grades"><div class="col-lg-3" align="center"><img src="images/golden.png" /><br /><h5>Golden with Delicate Taste</h5><h6>Usually made at the beginning of the new maple season. Pour over vanilla ice cream for a Vermont maple sundae, sometimes called the Sugarmakers’ Favorite Dessert.</h6><div id="blue-btn-grades">THIS IS MY FAVE</div><a href="http://vermontmaple.org/maple-products/" title="Maple Products | Vermont Maple Sugar Makers Association" onClick="ga('send', 'event', 'external link', 'buy button golden grades page', 'vermontmaple.org/maple-products', {'nonInteraction': 1});" target="_blank"><div id="teal-btn-grades">BUY ME SOME!</div></a></div></a>

再次感谢大家。我需要学习javascript ...

Answer 1

使用jQuery，没有CSS ......

演示：http://jsfiddle.net/pbQGP/1/

HTML：

<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>

JS：

$("button").on('click', function(){
    $("button").not(this).attr({disabled: "disabled"})
})

如何根据选择将叠加应用于某些元素？

1 个答案:

演示：http://jsfiddle.net/pbQGP/1/