javascript css change overiding css

Question

對不清楚的問題標題...無法想象如何將問題放在襯衫摘要中。

我有CSS來改變一個鏈接的背景顏色時懸停（用CSS轉換褪色的顏色）。我使用JS來改變正在使用的鏈接的背景顏色（我有選項卡，所選的背景是使用JS - getElementById（'foo'）。style.backgroundColor ='紅';）。

即使在選中標籤後，我也希望其他標籤在懸停時更改顏色。

它起初有效，但一旦我點擊了一個標籤（JS然後改變了該標籤的顏色），懸停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造型從樣式表來。

，而不是添加內嵌樣式的，其重置爲Nothing：

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：幹 - 不要重複自己。

此外，不需要使用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; 
} 

直播：http://jsfiddle.net/d9ffnw46/1/

BTW，你應該考慮使用一個框架庫如jQuery。作爲初學者，它使得代碼更簡單。

編輯：下面是用jQuery的例子：http://jsfiddle.net/d9ffnw46/2/