Question

我有一个div，它可以在悬停开/关时更改其中元素的css。但是当我鼠标悬停和鼠标移除时出现错误，颜色没有改变（错误在这个问题的标题中）

有趣的是前两个更改工作（更改图像和更改id'ace_title'的颜色，但'ace_feature'的mouseover和mouseout会生成错误。

以下是我的代码以及我尝试过的内容：

<div class="service_level effect8" onmouseover="getElementById('ace_service').src='images/ace_hover.png';
    getElementById('ace_title').style.color='#2C81B7';
    getElementsByClassName('ace_features').style.color='#2C81B7';"
    onmouseout="getElementById('ace_service').src='images/ace.png';
    getElementById('ace_title').style.color='black';
    getElementsByClassName('ace_features').style.color='black';">

    <img src="images/ace.png" id="ace_service">
    <p id="ace_title">Ace Service</p>

    <img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;">
    <p class="ace_features">
        Outstanding IT Support
    </p>

    <img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;">
    <p class="ace_features">
        Outstanding IT Support
    </p>

Answer 1

当您使用getElementById时，您会收到一个元素，因此它可以正常工作。当您使用getElementsByClassName时，您会收到一系列元素（在您的情况下包含两个元素），因此它不起作用。

以下行应该有效：

getElementsByClassName('ace_features')[0].style.color='black'

但使用普通脚本块代替内联

会好得多

Answer 2

这一行：

document.getElementsByClassName('ace_features')

返回元素数组或未定义

您应该将鼠标悬停事件更改为外部函数，因此您可以迭代所有类名称

＆＃13;

function onMouseOver() {
  document.getElementById('ace_service').src = 'images/ace_hover.png';
  document.getElementById('ace_title').style.color = '#2C81B7';
  var elements = document.getElementsByClassName('ace_features'), i, len;
  
  for (i = 0, len = elements.length; i < len; i++) {
    elements[i].style.color = '#2C81B7';
  }
}

function onMouseOut() {
  document.getElementById('ace_service').src = 'images/ace.png';
  document.getElementById('ace_title').style.color = 'black';
  var elements = document.getElementsByClassName('ace_features'), i, len;
  
  for (i = 0, len = elements.length; i < len; i++) {
    elements[i].style.color = 'black';
  }
}

＆＃13;

<div class="service_level effect8" onmouseover="onMouseOver()" onmouseout="onMouseOut()">

  <img src="images/ace.png" id="ace_service">
  <p id="ace_title">Ace Service</p>

  <img src="images/icon_tick.png" style="float:left;padding:3px 4px 0px 15px;">
  <p class="ace_features">
    Outstanding IT Support
  </p>

  <img src="images/icon_tick.png" style="float:left;padding:3px 4px 0px 15px;">
  <p class="ace_features">
    Outstanding IT Support
  </p>
</div>

＆＃13;

Answer 3

这行代码成功地为我工作，我改变的只是在类名后加上一个索引号。

document.getElementsByClassName（ 'changeMe'）[0] = .innerHTML '黄色';

Javascript |未捕获的TypeError：无法设置undefined的属性'color'

3 个答案: