Jquery 切换所选的多个Div

我试图使用Jquery/CSS设置所选DIV的背景，同时维护其他DIV的背景

假设我有三个白色背景的div。我想选择DIV#3并将背景色设置为黄色。然后，如果我选择#1，它会将背景更改为黄色，#2和#3将再次变为白色

HTML

  <div id="1" title="level" class="hover">
    <a href="#">
      1000
    </a>
  </div>
  <div id="2" title="level" class="hover">
    <a href="#">
      2000
    </a>
  </div>
  <div id="3" title="level" class="hover">
    <a href="#">
      3000
    </a>
  </div>

JS

.hover{
  background-color: #FFFFFF;
  height: 100px;
  width: 100px;
  cursor: pointer;
  float: left;
  margin: 10px  10px 10px 6px;
  padding: 4px 4px 4px 4px;
}
.selected{
  background-color:#F3AF4D
}
.unselected{
  background-color:#FFFFFF
}

$('div[title="level"]').on("click", function(){

    change_background()

    $(this).toggleClass("selected");

})

function change_background(){
  $( ".hover" ).each(function() {
    $( this ).toggleClass( "unselected" );
  });
}

---

我有一个hosed，因为它没有按照我所期望的方式工作，正如使用

:target

和链接ID的仅CSS选项所示

。悬停{
背景色：#FFFFFF；
高度：100px；
宽度：100px；
光标：指针；
浮动：左；
保证金：10px 10px 10px 6px；
填充：4px4px4px4px；
}
.悬停：目标{
背景色：#F3AF4D
}

---

切换类时，如果该类存在，则会将其删除；如果该类不存在，则会添加该类。对于超过2个悬停div的情况，您需要循环遍历每个div，删除“selected”类并添加“unselected”类。然后，最后将“selected”添加到像您这样单击的对象

   function change_background(){
      $( ".hover" ).each(function() {
        // remove 'selected' from every .hover
        $( this ).removeClass( "selected" ).addClass("unselected");
      });
    }