title: JavaScript - svg hover won't work after I assign color to the element
body: <p>In my CSS I have two classes for svg defined </p>
  
  <pre><code>.room:hover {
      fill: blue;
  }
  
  .room {
      fill: #f4cb42;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
  }
  </code></pre>
  
  <p>In my JS things go like this:</p>
  
  <pre><code>function highlightRoom(room) {
      var roomName = room['name'].toString();
      var area = document.getElementById("x" + roomName);
      if (area !== null) {
          area.style.fill = "#2bd923";
      }
  }
  </code></pre>
  
  <p>But after the room is highlighted the hover functionality won't work. How do I fix this?</p>