javascript css change overiding css

Question

Извините за непонятное название вопроса ... не мог подумать, как поставить вопрос в краткой форме рубашки.

У меня есть css, чтобы изменить фоновый цвет ссылки при наведении курсора (с css-транзистором, чтобы затухать цвет).

Из-за природы требования я использую JS для изменения цвета фона используемой ссылки (у меня есть вкладки, выбранный фон выбран с помощью JS-getElementById ('foo'). Style.backgroundColor = 'red';).

Даже после того, как была выбрана вкладка, я хочу, чтобы другие меняли цвет при наведении курсора.

Первоначально он работает, но как только я нажал на вкладку (JS затем изменит цвет этой вкладки), стиль hover css не работает - другие ссылки больше не меняют цвет при зависании.

У кого-нибудь еще была такая же проблема?

HTML:

<div class="software_section_selects_wrapper"> 
    <a id="a1" onclick="displayArrow('1')">OVERVIEW</a> 
    <a id="a2" onclick="displayArrow('2')">SPECS</a> 
    <a id="a3" onclick="displayArrow('3')">COMMENTS</a> 
    <div style="clear: both;"></div> 
</div> 

<div class="section_selects_arrow_wrapper"> 
    <img id="red1"alt="" src="images/red_arrow.png" width="40px" height="20px"/> 
    <img id="red2"alt="" src="images/red_arrow.png" width="40px" height="20px"/> 
    <img id="red3"alt="" src="images/red_arrow.png" width="40px" height="20px"/> 
</div> 

<div id="overview" class="software_overview"> 

</div> 
<div id="specs" class="software_overview"> 

</div> 
<div id="comments" class="software_overview"> 


</div> 

JS:

function displayArrow(arrow) { 
    var which_arrow = arrow; 

    if (which_arrow == '1') { 
     document.getElementById('a1').style.backgroundColor = 'red'; 
     document.getElementById('a2').style.backgroundColor = 'black'; 
     document.getElementById('a3').style.backgroundColor = 'black'; 

     document.getElementById('red1').style.display = 'block'; 
     document.getElementById('red2').style.display = 'none'; 
     document.getElementById('red3').style.display = 'none'; 

     document.getElementById('overview').style.display = 'block'; 
     document.getElementById('specs').style.display = 'none'; 
     document.getElementById('comments').style.display = 'none'; 
    } else if (which_arrow == '2') { 
     document.getElementById('a2').style.backgroundColor = 'red'; 
     document.getElementById('a1').style.backgroundColor = 'black'; 
     document.getElementById('a3').style.backgroundColor = 'black'; 

     document.getElementById('red2').style.display = 'block'; 
     document.getElementById('red1').style.display = 'none'; 
     document.getElementById('red3').style.display = 'none'; 

     document.getElementById('specs').style.display = 'block'; 
     document.getElementById('overview').style.display = 'none'; 
     document.getElementById('comments').style.display = 'none'; 
    } else { 
     document.getElementById('a3').style.backgroundColor = 'red'; 
     document.getElementById('a2').style.backgroundColor = 'black'; 
     document.getElementById('a1').style.backgroundColor = 'black'; 

     document.getElementById('red3').style.display = 'block'; 
     document.getElementById('red1').style.display = 'none'; 
     document.getElementById('red2').style.display = 'none'; 

     document.getElementById('comments').style.display = 'block'; 
     document.getElementById('overview').style.display = 'none'; 
     document.getElementById('specs').style.display = 'none'; 
    } 
} 

Answer 1

Эта строка кода:

document.getElementById('a2').style.backgroundColor = 'black'; 

добавляет встроенный стиль, который сильнее, чем :hover укладка идет из таблицы стилей.

Вместо добавления встроенного стиля, сбросить его ни к чему:

document.getElementById('a2').style.backgroundColor = ''; 

Answer 2

Я думаю, что его это то, что вы ищете

<div class="software_section_selects_wrapper"> 
      <a id="a1" onclick="displayArrow('1')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">OVERVIEW</a> 
      <a id="a2" onclick="displayArrow('2')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">SPECS</a> 
      <a id="a3" onclick="displayArrow('3')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">COMMENTS</a> 
      <div style="clear: both;"></div> 
</div> 

Добавить следующие JavaScript функции и изменить цвет, как вам нужно ,

function MouseHoverMethod(x) { 
    x.style.backgroundColor = 'green'; 
} 

function MouseOutMethod(x) { 
    x.style.backgroundColor = 'black'; 
} 

Answer 3

Ваш код далеко не сложный. Вы нарушаете правило № 1 программирования: DRY - Не повторяйте себя.

Также нет необходимости устанавливать цвет с помощью JavaScript, вместо этого установите класс для выбранного элемента и используйте его для его стилизации.

Пример: (без красной стрелкой набивать, потому что без таблицы стилей, трудно увидеть, что вы там делаете, и это, вероятно, можно было бы заменить какой-то чистый CSS, тоже):

<div class="software_section_selects_wrapper"> 
    <a onclick="displayTab(this, 'overview')">OVERVIEW</a> 
    <a onclick="displayTab(this, 'specs')">SPECS</a> 
    <a onclick="displayTab(this, 'comments')">COMMENTS</a> 
    <div style="clear: both;"></div> 
</div> 

<div class="tabs"> 
    <div id="overview" class="software_overview"> 
    </div> 
    <div id="specs" class="software_overview"> 
    </div> 
    <div id="comments" class="software_overview"> 
    </div> 
</div> 

---

JS:

<script> 
    function clearClass(elements) { 
     for (var i = 0; i < elements.length; i++) { 
      elements[i].className = ''; 
     } 
    } 

    function displayTab(link, tabId) { 
     var links = link.parentNode.getElementsByTagName('a'); 
     clearClass(links); 
     link.className = 'active'; 

     var tab = document.getElementById(tabId); 
     var tabs = tab.parentNode.getElementsByTagName('div'); 
     clearClass(tabs); 
     tab.className = 'active'; 
    } 
</script> 

---

CSS:

.tabs > div { 
    display: none; 
} 

.tabs > div.active { 
    display: block; 
} 

.software_section_selects_wrapper > a { 
    color: white; 
    background-color: black; 
} 

.software_section_selects_wrapper > a.active { 
    color: white; 
    background-color: red; 
} 

Live: http://jsfiddle.net/d9ffnw46/1/

BTW, вы должны смотреть в использовании рамки библиотеки, такие как JQuery.Как новичок он делает код таким, как это намного проще.

EDIT: Вот пример с JQuery: http://jsfiddle.net/d9ffnw46/2/