CODEWITHSUNDEEP
javascriptcss
Abdul Jabbar
Abdul Jabbar

Reputation: 2573

JavaScript Disabling the effect of external CSS?

I have a simple enough situation where i have three readonly input texts, on hover i change their backgrounds through CSS, and on click i want to change the clicked box's background permanently (till the next one is clicked) but as soon i click on one, the hover effect of CSS gets disabled and the color no longer changes on hover.. Code and output is below:

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < 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>

Upvotes: 0

Views: 73

Answers (3)

ketan
ketan

Reputation: 19341

Following is your solution. Check if any color then remove it.

 if(list[i].style.background != "")

Updated example.

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < list.length; i++) {
      if(list[i].style.background != "")
        list[i].style.background = '';
    }
    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>

Upvotes: 1

Girish
Girish

Reputation: 12127

Use !important; after css property, because you are using background property in javascript code, that is add style inline so CSS property overwrite by inline css 

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < 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 you don't want to update CSS then you can also use javaScript removeProperty() function to remove inline background property, see below code

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < list.length; i++) {
        list[i].style.removeProperty('background');
    }
    document.getElementById(id).style.background = '#d1d1d1';
}

Upvotes: 2

Pete
Pete

Reputation: 58462

instead of setting the background to 'none', just set it to '' and this should remove the background style to let the css take over:

function Calculate(id)
{
    var list = document.getElementsByClassName("options");
    for (var i = 0; i < list.length; i++) {
        list[i].style.background = '';
    }
    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>

Upvotes: 1

Related Questions