Question

很抱歉问题标题不清楚...无法想出如何将问题放入衬衫摘要中。

我有css在悬停时更改链接的背景颜色（使用css transistion淡化颜色）。

由于要求的性质，我使用JS来改变正在使用的链接的背景颜色（我有标签，使用JS选择所选择的背景 - getElementById（＆＃39; foo＆＃39;）。style.backgroundColor =＆＃39; red＆＃39 ;;）。

即使选择了标签，我希望其他人在悬停时更改颜色。

它最初有效，但是一旦我点击一个标签（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样式更强。

不是添加内联样式，而是将其重置为空：

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

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

BTW，您应该考虑使用jQuery等框架库。作为初学者，它使这样的代码更加简单。

编辑：这是jQuery的一个例子：http://jsfiddle.net/d9ffnw46/2/

javascript css改变覆盖css

3 个答案: