title: Is there a way to select an unselect multiple buttons with hover effect?
body: <p>I am making a sort of chatbot in HTML, CSS, and javascript with the website here &gt; <a href="https://chatroombot.n8thedev.repl.co/" rel="nofollow noreferrer">https://chatroombot.n8thedev.repl.co/</a></p>
  <p>If you click the menu button you will find a page to change the background, so far hovering over the 27 different buttons creates a border inside the button that is somewhat transparent. I attempted to make a click effect where it makes the clicked button border darker (higher alpha value). The issue I ran into was when I cleared the other borders when you click on the button. EX: if (Click button 1) { border: none for button 1,2,3... }</p>
  <p>But when I tried to do that the hover effect didn't work anymore because it cleared the button's border permanently.</p>
  <p>I am here for suggestions on a solution.</p>
  <p>Also here is the existing code:</p>
  <p>index.html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
      &lt;title&gt;CHAT!!&lt;/title&gt;
      &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
  &lt;/head&gt;
   
  &lt;body&gt;
      &lt;script src=&quot;script.js&quot; defer&gt;
   
      &lt;/script&gt;
      &lt;div class=&quot;chatBoxContainer&quot; id=&quot;chatBoxContainer&quot; style=&quot;&quot;&gt;
   
      &lt;/div&gt;
      &lt;div class=&quot;entryMessage&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;inputBg&quot; id=&quot;inputBg&quot;&gt;&lt;/div&gt;
              &lt;input type=&quot;text&quot; placeholder=&quot;Type a message&quot; autocomplete=&quot;off&quot; class=&quot;inputMessage&quot; id=&quot;inputMessage&quot; onkeypress=&quot;return demoForEnterKey(event)&quot; style=&quot;font-size: 16px;&quot; onclick=&quot;this.style.color='white';&quot;&gt;&lt;/input&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class=&quot;menuButton&quot; id=&quot;menuButton&quot; style= &quot;cursor:pointer&quot; onclick=&quot;menuClick()&quot;&gt;
      &lt;img src=&quot;menu.png&quot; class=&quot;menuButtonImage&quot;&gt;&lt;/img&gt;
    &lt;/button&gt;
    &lt;div class=&quot;newScreen&quot; id=&quot;newScreen&quot;&gt;
      &lt;div class=&quot;colorSelectorTitle&quot;&gt;
        &lt;div&gt;
          &lt;div class=&quot;backText&quot;&gt;Set Chat Wallpaper&lt;/div&gt;
          &lt;button class=&quot;backButton&quot; style=&quot;background-color: transparent; border-style: none; cursor: pointer;&quot; onclick=&quot;bringBack()&quot;&gt;
            &lt;img src=&quot;back-arrow.png&quot; class=&quot;backArrowImg&quot;&gt;&lt;/img&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;backgroundChooserContainer&quot;&gt;
        &lt;div class=&quot;backgroundSelector&quot;&gt;
          &lt;button class=&quot;_3sW34&quot; id=&quot;clr1&quot; style=&quot;background-color: rgb(5, 5, 5);&quot;&gt;
            &lt;span class=&quot;defaultText&quot;&gt;Default&lt;/span&gt;
          &lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(15, 36, 36);&quot; id=&quot;clr2&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(18, 38, 31);&quot; id=&quot;clr3&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(17, 36, 28);&quot; id=&quot;clr4&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(17, 30, 39);&quot; id=&quot;clr5&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(15, 34, 36);&quot; id=&quot;clr6&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(31, 29, 37);&quot; id=&quot;clr7&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(33, 33, 33);&quot; id=&quot;clr8&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(31, 33, 28);&quot; id=&quot;clr9&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(35, 35, 27);&quot; id=&quot;clr10&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(38, 36, 25);&quot; id=&quot;clr11&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(38, 31, 23);&quot; id=&quot;clr12&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(38, 23, 23);&quot; id=&quot;clr13&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(38, 15, 16);&quot; id=&quot;clr14&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(38, 10, 16);&quot; id=&quot;clr15&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(25, 5, 11);&quot; id=&quot;clr16&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(33, 16, 12);&quot; id=&quot;clr17&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(15, 12, 12);&quot; id=&quot;clr18&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(16, 25, 25);&quot; id=&quot;clr19&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(10, 29, 37);&quot; id=&quot;clr20&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(13, 21, 35);&quot; id=&quot;clr21&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(13, 15, 17);&quot; id=&quot;clr22&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(10, 12, 13);&quot; id=&quot;clr23&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(17, 11, 18);&quot; id=&quot;clr24&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(30, 31, 31);&quot; id=&quot;clr25&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(38, 38, 24);&quot; id=&quot;clr26&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;_3sW34&quot; style=&quot;background-color: rgb(35, 35, 31);&quot; id=&quot;clr27&quot;&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>script.js:</p>
  <pre><code>var txt = document.getElementById(&quot;inputMessage&quot;);
  var newScreen = document.getElementById(&quot;newScreen&quot;);
  newScreen.style.display = &quot;none&quot;;
   
  window.onload = function () {
    var chatBoxHeight = window.innerHeight - 80;
    var realChatBoxHeight = chatBoxHeight + &quot;px&quot;;
    var chatBox = document.getElementById(&quot;chatBoxContainer&quot;).style.height = realChatBoxHeight;
  }
   
  window.onresize = function () {
    var chatBoxHeight = window.innerHeight - 80;
    var realChatBoxHeight = chatBoxHeight + &quot;px&quot;;
    var chatBox = document.getElementById(&quot;chatBoxContainer&quot;).style.height = realChatBoxHeight;
  }
   
  function bringBack() {
    newScreen.style.display = &quot;none&quot;;
  }
   
  function createBotChat (botChatText) {
    var chatContainer = document.getElementById(&quot;chatBoxContainer&quot;);
    var newBotChat = document.createElement(&quot;div&quot;);
    newBotChat.className = &quot;newBotChat&quot;;
    newBotChat.textContent = botChatText;
    chatContainer.appendChild(newBotChat);
    newBotChat.scrollIntoView();
  }
   
  function demoForEnterKey(eventName) {
    if (eventName.keyCode == 13 &amp;&amp; document.getElementById(&quot;inputMessage&quot;).value != &quot;&quot;) {
      var txt = document.getElementById(&quot;inputMessage&quot;);
      var newChat = document.createElement(&quot;div&quot;);
      newChat.textContent = txt.value + &quot;                   &quot;;
      var chatContainer = document.getElementById(&quot;chatBoxContainer&quot;);
      newChat.className = &quot;newChat&quot;;
      var timeStamp = document.createElement(&quot;div&quot;);
      timeStamp.className = &quot;timeStamp&quot;;
      var today = new Date();
      var hour = today.getHours();
      var min;
      var amOrPm;
      if (today.getHours() &gt; 24 &amp;&amp; today.getHours() &lt; 13) {
        amOrPm = &quot;AM&quot;;
      } else {
        amOrPm = &quot;PM&quot;;
      }
      if (hour == 13){
        hour = 1;
      } else if (hour ==14){
        hour = 2;
      }
      else if (hour == 15){
        hour = 3;
      }
      else if (hour == 16){
        hour = 4;
      }
      else if (hour == 17){
        hour = 5;
      }
      else if (hour == 18){
        hour = 6;
      }
      else if (hour == 19){
        hour = 7;
      }
      else if (hour == 20){
        hour = 8;
      }
      else if (hour == 21){
        hour = 9;
      }
      else if (hour == 22){
        hour = 9;
      }
      else if (hour == 23){
        hour = 10;
      }
      else if (hour == 24){
        hour = 11;
      }
      else if (hour == 1){
        hour = 12;
      }
      if (today.getMinutes() == 0){
        min = &quot;00&quot;;
      } else if (today.getMinutes() == 1){
        min = &quot;01&quot;;
      }
      else if (today.getMinutes() == 2){
        min = &quot;02&quot;;
      }
      else if (today.getMinutes() == 3){
        min = &quot;03&quot;;
      }
      else if (today.getMinutes() == 4){
        min = &quot;04&quot;;
      }
      else if (today.getMinutes() == 5){
        min = &quot;05&quot;;
      }
      else if (today.getMinutes() == 6){
        min = &quot;06&quot;;
      }
      else if (today.getMinutes() == 7){
        min = &quot;07&quot;;
      }
      else if (today.getMinutes() == 8){
        min = &quot;08&quot;;
      }
      else if (today.getMinutes() == 9){
        min = &quot;09&quot;;
      } else if (today.getMinutes() &gt; 9) {
        min = today.getMinutes();
      }
      timeStamp.textContent = hour + &quot;:&quot; + min + &quot; &quot; + amOrPm;
      newChat.appendChild(timeStamp);
      chatContainer.appendChild(newChat);
      newChat.scrollIntoView();
      if (newChat.textContent.toLowerCase().includes(&quot;help&quot;) == true) {
        createBotChat(&quot;List of all commands:&quot;);
        createBotChat(&quot;• Clear - Clears the previous chats&quot; + &quot;\n&quot; +&quot; • Website - Displays our main page&quot; + &quot;\n&quot; + &quot;&quot;)
      } else if(newChat.textContent.toLowerCase().includes(&quot;clear&quot;) == true) {
        location.reload();
      } else if(newChat.textContent.toLowerCase().includes(&quot;website&quot;) == true) {
        createBotChat(&quot;Our website: example.com&quot;)
      }
      document.getElementById(&quot;inputMessage&quot;).value = &quot;&quot;;
    }
  }
   
  createBotChat(&quot;Welcome to N8TheDev's ✨NEW✨ chatroom bot!!&quot;);
  createBotChat(&quot;Type 'Help' to see a list of all the  bots's commands&quot;);
   
  function menuClick () {
    newScreen.style.display = &quot;block&quot;;
  }
  </code></pre>
  <p>style.css:</p>
  <pre><code>body{
    background-color: rgb(255, 255, 255);
  }
   
  .newScreen {
    background-color: #1E2428;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
   
  .menuButtonImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
  }
   
  .backArrowImg {
    background-color: transparent;
    width: 32px;
    height: 32px;
    filter: invert(100%);
  }
   
  .backText {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 85px;
    color: white;
    font-size: 19px;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
  }
   
  .backButton{
    position: absolute;
    left: 20px;
    width: 32px;
    height: 32px;
    top: 50%;
    transform: translateY(-50%);
  }
   
  .colorSelectorTitle {
    background-color: #323739;
    position: relative;
    width: 100%;
    min-height: 60px;
    height: 15%;
    max-height: 80px;
  }
   
  .menuButton {
    position: absolute;
    background-color: transparent;
    top: 15px;
    border-style: hidden; 
    right: 15px;
    width: 50px;
    height: 50px;
  }
   
  .entryMessage {
    background: transparent;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 62px;
    width: 100%;
  }
   
  .container{
    position: relative;
    height: 100%;
  }
   
  .inputMessage{
    border-color: transparent;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96%;
    height: 30px;
    transform: translate(-50%, -50%);
    color: white;
  }
   
  .inputBg{
    border-radius: 50px 50px 50px 50px;
    border-color: transparent;
    background: #33383B;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 99%;
    height: 43px;
    transform: translate(-50%, -50%);
  }
   
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #818486;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #818486;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #818486;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #818486;
  }
   
  textarea:focus, input:focus{
  outline: none;
  }
   
  .chatBoxContainer {
    position: relative;
    width: 100%;
    overflow: auto;
    background-color: transparent;
  }
   
  .newBotChat {
    text-align: left;
    color: lightgray;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
    white-space: pre-line;
    background-color: #3b4044;
    width: max-content;
    max-width: 60%;
    height: auto;
    padding: 4px 6px 4px 6px;
    margin: 7px 0px 7px 0px;
    border-radius: 6px;
    word-wrap: normal;
  }
   
  .newChat {
    text-align: left;
    color: lightgray;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
    background-color: #1d6f70;
    width: max-content;
    max-width: 60%;
    height: auto;
    padding: 4px 6px 4px 6px;
    margin: 7px 0px 7px 0px;
    border-radius: 6px;
    word-wrap: break-word;
  }
   
  * {
    scrollbar-color: rgba(0,0,0,.2) hsla(0,0%,100%,.1);
    scrollbar-width: thin;
  }
   
  ::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important;
  }
   
  ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
  }
   
  ::-webkit-scrollbar-track {
    background: hsla(0,0%,100%,.1);
  }
   
  .timeStamp {
    color: #f1f1f2a1;
    position: relative;
    flex: none;
    font-size: 11px;
    line-height: 19px;
    display: inline-block;
  }
   
   ._2brEy {
    background-color: #0d1418;
  }
   
   ._2RSZp {
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
    position: relative;
  }
   
  ._3sW34 {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 15px;
    text-align: center;
    border: 4px solid transparent;
    float: left;
    margin-left: 15px;
  }
   
  .defaultText {
    text-align: center;
    color: lightgray;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
    max-height: 72px;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
   
  ._3sW34:hover {
    cursor: pointer;
    border: 4px solid rgba(225, 225, 225, 0.2);
  }
   
  .backgroundChooserContainer {
    position: relative;
    width: 100%;
    height: 75%;
    overflow: auto;
    background-color: transparent;
    margin: 10px;
  }
   
  .backgroundSelector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }
   
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  </code></pre>