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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With