Question

我尝试在mouseover，mouseout和onclick上对元素进行bgcolor更改。问题是Javascript用mouseout覆盖了我的onclick，所以我不能同时使用。鼠标悬停后有没有办法重置鼠标悬停？

＆＃13;

        function init() {
          document.getElementById('default').onmouseover = function() {
            tabHoverOn('default', 'grey')
          };
          document.getElementById('default').onmouseout = function() {
            tabHoverOff('default', 'yellow')
          };
          document.getElementById('section2').onmouseover = function() {
            tabHoverOn('section2', 'grey')
          };
          document.getElementById('section2').onmouseout = function() {
            tabHoverOff('section2', 'yellow')
          };
          document.getElementById('section3').onmouseover = function() {
            tabHoverOn('section3', 'grey')
          };
          document.getElementById('section3').onmouseout = function() {
            tabHoverOff('section3', 'yellow')
          };
        }


        function tabHoverOn(id, bgcolor) {
          document.getElementById(id).style.backgroundColor = bgcolor;
        }

        function tabHoverOff(id, bgcolor) {
          document.getElementById(id).style.backgroundColor = bgcolor;
        }
        var current = document.getElementById('default');

        function tab1Highlight(id) {

          if (current != null) {
            current.className = "";
          }
          id.className = "tab1highlight";
          current = id;
        }

        function tab2highlight(id) {

          if (current != null) {
            current.className = "";
          }
          id.className = "tab2highlight";
          current = id;
        }

        function tab3highlight(id) {
          if (current != null) {
            current.className = "";
          }
          id.className = "tab3highlight";
          current = id;
        }
        window.onload = init();

＆＃13;

body {
  width: 900px;
  margin: 10px auto;
}
nav {
  display: block;
  width: 80%;
  margin: 0 auto;
}
nav > ul {
  list-style: none;
}
nav > ul > li {
  display: inline-block;
  margin: 0 3px;
  width: 150px;
}
nav > ul > li > a {
  width: 100%;
  background-color: #ffff66;
  border: 1px solid #9b9b9b;
  border-radius: 12px 8px 0 0;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  font-family: arial, sans-serif;
}
main {
  display: block;
  width: 80%;
  margin: 0 auto;
  border: 1px solid #9b9b9b;
  padding: 10px;
}
main > h1 {
  font-size: 1.5em;
}
.tab1highlight {
  background-color: #339966;
  color: white;
}
.tab2highlight {
  background-color: #ff6666;
  color: white;
}
.tab3highlight {
  background-color: #6600ff;
  color: white;
}
main img {
  border: 5px solid #eeefff;
  width: 80%;
  margin-top: 20px;
}

＆＃13;

<body>
<nav>
    <ul>
        <li><a href="#sec1" id="default" onclick="tab1Highlight(this)">Section 1</a></li>
        <li><a href="#sec2" id="section2" onclick="tab2highlight(this)">Section 2</a></li>
        <li><a href="#sec3" id="section3" onclick="tab3highlight(this)">Section 3</a></li>
    </ul>
</nav>
<main>
    <h1>Exercise: Navigation Tab #5</h1>
    <ul>
        <li>
            Combine the navigation tab exercises #1, #3, and #4 in one file, including <br>
            <ul>
                <li>temporarily change the background color of a tab when the cursor is hovering on it.</li>
                <li>set the foreground and background color of the tab being clicked.</li>
                <li>change the background color of the main element based on the selected tab.</li>
            </ul>
            <p>
                To test, click on a tab and then move your mouse around.  For example, the third tab is clicked, the tab background color is switched to blue.  Then hover the mouse over the third tab, the background color of the tab should be switch to light green and then back to blue after the mouse moves out.
            </p>

            <img src="menu_tab5.jpg">


        </li>
    </ul>
</main>

＆＃13;

Answer 1

尝试更新布尔变量。

var Ele = document.getElementById('default');
var clicked = false;

Ele.onclick = function(){
    clicked = true;
    // add additional functionality here
}
Ele.onmouseover = function(){
    clicked = false;
    // add additional functionality here
}
Ele.onmouseout = function(){
    if(!clicked){
    // add additional functionality here
    }
}

Answer 2

如果你可以提供帮助，那么将CSS完全保留在JavaScript之外通常是一个好主意。解决悬停问题的更好策略是使用CSS伪选择器:hover而不是编码JavaScript中的颜色变化。如果您为所有选项卡提供相同的类，则只需编写一次CSS：

.tab {
  background-color: yellow;
}

.tab:hover {
  background-color: grey;
}

完成上述操作后，您还可以通过创建一个事件处理程序将点击样式转移到CSS，每次单击选项卡时都会添加和删除特殊类。

在CSS文件中：

.tab.clicked {
  background-color: blue;
}

然后在JavaScript中，例如：

var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i ++) {
  tabs[i].onclick = function (ev) {
    for (i = 0; i < tabs.length; i ++) {
      tabs[i].classList.remove('clicked');
    }
    ev.currentTarget.classList.add('clicked');
  };
}

我创建了JSFiddle来说明。

如何有两个不同的bgcolor改变事件

2 个答案: