Question

我遇到mouseover事件的问题。当我将鼠标悬停在其中一个div上时，div（主页）上的颜色变得非常好，但是当我将鼠标悬停在另一个div（测试）上时，它也会变成相同的颜色所以我会同时拥有两个颜色相同的div。

我希望如果你去另一个div，mouseover会离开它所在的旧div。因此，一次只有一个div可以有mousover事件。我是JS的新手，如果有人能帮我解决这个问题会很棒！： - ）

这是我的代码：

HTML

 <li class="first" id="color"><a href="index.php">Home</a></li> 
 <li id="color1" ><a href="index.php?content=test">test</a></li>

的JavaScript

var div = document.getElementById( 'color' );
div.onmouseover = function() { 
  this.style.backgroundColor = 'red';
}
var div = document.getElementById( 'color1' );
div.onmouseover = function() { 
  this.style.backgroundColor = 'red';
}

Answer 1

仅考虑包含两个li元素的示例。请找到以下答案。

var div = document.getElementById( 'color' );
div.onmouseover = function() { 
  this.style.backgroundColor = 'red';
}
div.onmouseleave=function() {
  this.style.backgroundColor = "white";
}

var div = document.getElementById( 'color1' );
div.onmouseover = function() { 
  this.style.backgroundColor = 'red';
}

div.onmouseleave=function() {
  this.style.backgroundColor = "white";
}

Answer 2

您需要一个相反的功能，它将关闭添加的background-color属性。

＆＃13;

var div = document.getElementById('color');
div.onmouseover = function() {
  this.style.backgroundColor = 'red';
}
div.onmouseleave = function() {
  this.style.backgroundColor = 'transparent';
}
var div1 = document.getElementById('color1');
div1.onmouseover = function() {
  this.style.backgroundColor = 'red';
}
div1.onmouseleave = function() {
  this.style.backgroundColor = 'transparent';
}

＆＃13;

<li class="first" id="color"><a href="index.php">Home</a></li>

<li id="color1"><a href="index.php?content=test">test</a></li>

＆＃13;

但只有在css中才能做到这一点。

＆＃13;

li:hover {
  background-color: red;
}

＆＃13;

<li class="first" id="color"><a href="index.php">Home</a></li>

<li id="color1"><a href="index.php?content=test">test</a></li>

＆＃13;

Answer 3

有更好的方法来实现这一目标。

在学习JavaScript时，您可以看到onmouseleave事件，并在此处还原背景颜色。

＆＃13;

var div = document.getElementById('color');
div.onmouseover = function() {
  this.style.backgroundColor = 'red';
}
div.onmouseleave = function() {
  this.style.backgroundColor = '';
}
var div2 = document.getElementById('color1');
div2.onmouseover = function() {
  this.style.backgroundColor = 'red';
}
div2.onmouseleave = function() {
  this.style.backgroundColor = '';
}

＆＃13;

<li class="first" id="color"><a href="#">Home</a></li>
<li id="color1"><a href="#">test</a></li>

＆＃13;

Answer 4

您只需保存＆＃34;最后悬停对象＆＃34;的引用，并在悬停新元素时使用它。

// The first time the variable do not have a erference to any element
var lastHovered = null;
var hover = function() {
    // When the hover event is called, if the saved reference is different
    // to the element itself, do the work (Is dump to apply the red background)
    // every time you hover the same element again when is already red
    if (lastHovered != this) {
        // The next line will check if the last hovered element is
        // actually an element and apply the old backgound if it does
        lastHovered && lastHovered.style.backgroundColor = 'blue'; // blue, transparent or whatever color you want it to return back
        // Apply our cool new background
        this.style.backgroundColor = 'red';
        // And save the reference
        lastHovered = this;
    }
};
var div = document.getElementById( 'color' );
div.onmouseover = hover;

div = document.getElementById( 'color1' );
div.onmouseover = hover;

Answer 5

您需要添加onmouseout事件以将颜色返回白色：

div.onmouseout = function(){this.style.backgroundColor = 'white';}

编辑：另外，你真的不应该声明两个具有相同名称的变量。请考虑使用div和div1之类的内容，因为这不是您希望在未来编程中继续使用的习惯。

如果您只想在其他项目悬停时删除红色突出显示，请使用此代码（它需要单独的变量名称）：

var div = document.getElementById( 'color' );
var div1 = document.getElementById( 'color1' );
div.onmouseover = function() { 
  this.style.backgroundColor = 'red';
  div1.style.backgroundColor = 'white';
}
div1.onmouseover = function() { 
  this.style.backgroundColor = 'red';
  div.style.backgroundColor = 'white';
}

正如您所看到的，您添加到列表中的项目越多，您的代码就会变得非常冗长。为了简化，探索getElementsbyClass或getElementsbyTagName等选项;但是，这些选项中的任何一个都需要循环来处理调用类/标记的每个元素。

Answer 6

以下是您所要求的内容，以及一些更清晰，可重复使用的代码：

function getHighlightElements() {
  return document.getElementsByClassName('highlight');
}

function setBgColor(element, color) {
  element.style.backgroundColor = color;
}

// add an event listener to all elements with 'class="highlight"'
var highlightElements = getHighlightElements();
for (i = 0; i < highlightElements.length; i++) {
  highlightElements[i].addEventListener("mouseover", toggleHighlight);
}

// function that is called when the event is triggered, in this case, mouseover
function toggleHighlight(event) {
  // clear background color for all 'highlight' elements
  var highlightElements = document.getElementsByClassName('highlight');
  for (i = 0; i < highlightElements.length; i++) {
    setBgColor(highlightElements[i], 'white');
  }
  // set the background color for the one that triggered the event
  setBgColor(event.currentTarget, 'red');
}

<li class="highlight" id="first"><a href="index.php">Home</a></li>
<li class="highlight" id="second"><a href="index.php?content=test">Test</a></li>
<li class="highlight" id="third"><a href="index.php?content=another">Another</a></li>

但是您可以使用CSS，如下所示：

li.highlight:hover {
  background-color: red;
}

<li class="highlight" id="first"> <a href="index.php">Home</a></li>
<li class="highlight" id="second"><a href="index.php?content=test">test</a></li>

Javascript Mouseover事件

6 个答案: