Should be verry easy but I can't get it to work. As described in the title I would like to change onmouseover the background-color from span.name (orange)
<div class="pdf-icon-box" style="position:relative;" onmouseover="this.style.backgroundColor = 'yellow'"; onmouseout="this.style.backgroundColor = 'green'"; >
<span class="pdf-style">
<span class="name" style="display:inline-block;background-color:orange;"> T E S T </span>
</span>
</div>
I found this but coul'd not get it to work Get Element By using Class name
This is what I'm trying: fiddle is here
It only has to work in FF
Thanks for help!
Should be verry easy but I can't get it to work. As described in the title I would like to change onmouseover the background-color from span.name (orange)
<div class="pdf-icon-box" style="position:relative;" onmouseover="this.style.backgroundColor = 'yellow'"; onmouseout="this.style.backgroundColor = 'green'"; >
<span class="pdf-style">
<span class="name" style="display:inline-block;background-color:orange;"> T E S T </span>
</span>
</div>
I found this but coul'd not get it to work Get Element By using Class name
This is what I'm trying: fiddle is here
It only has to work in FF
Thanks for help!
Share Improve this question edited May 23, 2017 at 12:30 CommunityBot 11 silver badge asked Jul 4, 2013 at 8:12 carambacaramba 22.5k20 gold badges93 silver badges133 bronze badges 5- @steve no it doesn't. I want the orange color "TEST" to change – caramba Commented Jul 4, 2013 at 8:16
- why don't you just use css? developer.mozilla.org/en-US/docs/Web/CSS/:hover – magritte Commented Jul 4, 2013 at 8:17
- Yep got it now see my answer. – Ben Commented Jul 4, 2013 at 8:17
- @magritte :hover doesn't work (it is a touch screen) please don't ask me why but onmouseover does work – caramba Commented Jul 4, 2013 at 8:27
- oh - well then yeah hover isn't relevant for a touch device. not sure what the ux is that requires you to add hover then? are you maybe looking for :active ? i.e. when they actually press the element with their finger? – magritte Commented Jul 4, 2013 at 8:36
6 Answers
Reset to default 5You're looking for something like this:
onmouseover="this.childNodes[1].childNodes[1].style.background='green'";
This is pretty ugly though, a better solution is
span.name:hover {
background:green;
}
in CSS.
To explain the JS, in case it helps:
this.childNodes
gets a list of all the children of this.
The first one at index [0] is a text node (the linebreak).
The second one, at index [1] is the span you're looking for.
Then, do the same for that span.
Modifying your code
<div class="pdf-icon-box" style="position:relative;" onmouseover="this.getElementsByClassName('name')[0].style.backgroundColor = 'yellow'"; onmouseout="this.getElementsByClassName('name')[0].style.backgroundColor = 'green'"; >
<span class="pdf-style">
<span class="name" style="display:inline-block;background-color:orange;"> T E S T </span>
</span>
</div>
Demo: Fiddle
You may also try this
window.onload = function(){
var span = document.querySelector('.name');
// if you want to change the color to change onload
span.style.backgroundColor = 'green';
span.onmouseover = function(){
this.style.backgroundColor = 'yellow';
};
span.onmouseout = function(){
this.style.backgroundColor = 'green';
};
};
Just put the code between your <head> tags like this
<head>
<script type="text/javascript">
// code goes here
</script>
</head>
Example.
a SPACE is a child. so if u have spaces between u can't get it.
one way is to write the code without spaces and use firstChild
<div class="pdf-icon-box" style="position:relative;" onmouseover="this.firstChild.firstChild.style.backgroundColor = 'yellow'"; onmouseout="this.firstChild.firstChild.style.backgroundColor = 'green'"; ><span class="pdf-style"><span class="name" style="display:inline-block;"> T E S T </span></span></div>
second way is to use the childNodes[childelement] again : a space/tab/new line is a child
<div class="pdf-icon-box" style="position:relative;" onmouseover="this.childNodes[0].childNodes[0].style.backgroundColor = 'yellow'"; onmouseout="this.childNodes[0].childNodes[0].style.backgroundColor = 'green'"; ><span class="pdf-style"><span class="name" style="display:inline-block;"> T E S T </span></span></div>
third way is to use the className
<div class="pdf-icon-box" style="position:relative;" onmouseover="this.getElementsByClassName('name')[0].style.backgroundColor = 'yellow'"; onmouseout="this.getElementsByClassName('name')[0].style.backgroundColor = 'green'"; >
<span class="pdf-style">
<span class="name" style="display:inline-block;"> T E S T </span>
</span>
</div>
but thats not a nice way to do that. use css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.name{background-color:yellow;}
.name:hover{background-color:green;}
</style>
<body>
<div class="pdf-icon-box" style="position:relative;">
<span class="pdf-style">
<span class="name"> T E S T </span>
</span>
</div>
</body>
</html>
In addition to @ArunPJohny, you'd better use CSS.
.pdf-icon-box:hover .name {
background-color: orange;
}
.pdf-icon-box .name {
background-color: green;
}
I am not sure why don't you use jquery.
$(".pdf-icon-box").hover(function(){
$(this).find(".name").css("color","yellow")
//if you want to change background color
$(this).find(".name").css("background","yellow")
});