JavaScript Disabling the effect of external CSS? -

i have simple enough situation have 3 readonly input texts, on hover change backgrounds through css, , on click want change clicked box's background permanently (till next 1 clicked) click on one, hover effect of css gets disabled , color no longer changes on hover.. code , output below:

function calculate(id)  {      var list = document.getelementsbyclassname("options");      (var = 0; < list.length; i++) {          list[i].style.background = 'none';      }      document.getelementbyid(id).style.background = '#d1d1d1';  }

.options:hover {  	background:#d1d1d1;  }

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="calculate(this.id)" readonly>         <input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="calculate(this.id)" readonly>        <input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="calculate(this.id)" readonly><br><br>

use !important; after css property, because using background property in javascript code, add style inline css property overwrite inline css

function calculate(id)  {      var list = document.getelementsbyclassname("options");      (var = 0; < list.length; i++) {          list[i].style.background = 'none';      }      document.getelementbyid(id).style.background = '#d1d1d1';  }

.options:hover {  	background:#d1d1d1 !important;  }

<input type="text" class="options" id="3" value="3" style="width: 30px;text-align:center" onclick="calculate(this.id)" readonly>         <input type="text" class="options" id="6" value="6" style="width: 30px;text-align:center; margin-left:30px" onclick="calculate(this.id)" readonly>        <input type="text" class="options" id="9" value="9" style="width: 30px;text-align:center; margin-left:30px" onclick="calculate(this.id)" readonly><br><br>

if don't want update css can use javascript removeproperty() function remove inline background property, see below code

function calculate(id) {     var list = document.getelementsbyclassname("options");     (var = 0; < list.length; i++) {         list[i].style.removeproperty('background');     }     document.getelementbyid(id).style.background = '#d1d1d1'; }