I have an div which changes the css of elements inside it when hovered on/off. However I get an error when I mouseover and mouseout, and the color is not changed (the error is in the title of this question)

Whats interesting is the first two changes work (changing the image and changing color of id 'ace_title' but the mouseover and mouseout of 'ace_feature' generates the error.

Below is my code and what I have tried:

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

I have an div which changes the css of elements inside it when hovered on/off. However I get an error when I mouseover and mouseout, and the color is not changed (the error is in the title of this question)

Whats interesting is the first two changes work (changing the image and changing color of id 'ace_title' but the mouseover and mouseout of 'ace_feature' generates the error.

Below is my code and what I have tried:

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

• javascript
• html
• css
• mouseover

• 1 "document.getElementById('ace_service').src – Arun P Johny Commented May 14, 2015 at 8:14
• 1 getElementById and getElementsByClassName are both functions of document. – Patrick Roberts Commented May 14, 2015 at 8:15
• why don't you try to put javascript variable in var then apply .color – Partha Bisoi Commented May 14, 2015 at 8:15
• Please indent your code properly. – user663031 Commented May 14, 2015 at 8:17
• can you try in google crome developer tool. Try to alert getElementById('ace_title').style . I think you will be getting a undefined there – Partha Bisoi Commented May 14, 2015 at 8:18

2 Answers 2

When you use getElementById you receive a one element, so it works. When you use getElementsByClassName you receive a collection of elements (containing two elements in your case), so it doesn't work.

The following line should work:

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

but it would be much better to use a normal script blocks instead of inline

This line:

document.getElementsByClassName('ace_features')

returns an array of elements or undefined

You should change your mouseover event rather to an external function, so you could iterate all the class names as such

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

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