Javascript 如何根据选择将覆盖应用于某些图元？

我在一个页面上有四个不同的按钮，每个按钮都位于与该按钮相关的产品描述下。这些按钮供用户单击其喜爱的产品。当他们点击一个按钮时，最好给其他三个按钮一个覆盖图，或其他视觉效果，使其看起来像是被禁止被选择。有没有一个简单的方法可以做到这一点？？可能使用CSS或javascript

我是Javascript新手，非常感谢您的帮助！！谢谢

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

HTML:

如果你还需要什么，请告诉我

更新：2/18/14- 在我最初的帖子中，我提到了button，但更具体地说，我更希望将此覆盖应用于整个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>

---

再次感谢大家。我需要用jQuery学习javascript…

，而不是CSS

演示： HTML:

---

“我想说你需要CSS和Javascript……如果你发布代码，你会得到更好的答案，更符合你的需求。”Billy Moon。我添加了你建议的代码。如果足够，请告诉我。当我将JS添加到带有标签的标题标签中时，它确实为我通过CSS制作的按钮提供了另一种按钮样式，但它没有禁用未选择的按钮。我不确定这是因为额外的CSS还是我的设置不正确？谢谢你的帮助！

#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;
}

<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>

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

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