javascript css更改覆盖css

很抱歉问题标题不清楚…无法思考如何将问题放入摘要中

我有css来改变一个链接的背景颜色，当鼠标悬停在上面时（使用css转换来淡入颜色）

由于需求的性质，我使用JS更改正在使用的链接的背景颜色（我有选项卡，所选链接的背景是使用JS-getElementById（'foo'）。style.backgroundColor='red'；）选择的）

即使选择了选项卡，我也希望其他选项卡在悬停时更改颜色

它最初可以工作，但一旦我点击了一个选项卡（JS然后改变了该选项卡的颜色），悬停css样式就不起作用了——其他链接在悬停时不再改变颜色

还有其他人有同样的问题吗

HTML:

这行代码：

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

添加比样式表中的

：hover

样式更强的内联样式

与其添加内联样式，不如将其重置为“无”：

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

---

我想他就是你要找的人

<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设置颜色，而是将一个类设置为选定项并使用该类设置样式

示例：（没有红色箭头的东西，因为没有样式表，很难看到您在那里做什么，而且可能也可以用一些纯CSS替换）：

现场：

顺便说一句，您应该考虑使用jQuery之类的框架库。对于初学者来说，它使这样的代码更简单

---

编辑：这里有一个jQuery示例：

发布您的代码，请提供css和Javascript

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

<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>

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

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

<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>

<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>

.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;
}