Html onmouseover="this.style... 正在工作，但我需要像 onmouseover="this.child.child 这样的东西
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17465113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onmouseover="this.style... is working but I need something like onmouseover="this.child.child
提问by caramba
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)
应该很容易，但我无法让它工作。如标题中所述，我想将鼠标悬停在 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
我找到了这个，但无法让它工作 Get Element By using Class name
This is what I'm trying: fiddle is here
这就是我正在尝试的：小提琴在这里
It only has to work in FF
它只需要在 FF 中工作
Thanks for help!
感谢帮助！
回答by Ben
You'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.
在 CSS 中。
To explain the JS, in case it helps:
解释JS，以防万一它有帮助：
this.childNodes
gets a list of all the children of this.
获取 的所有子项的列表this。
The first one at index [0]is a text node (the linebreak).
索引处的第一个[0]是文本节点（换行符）。
The second one, at index [1]is the span you're looking for.
第二个，在 index[1]是你正在寻找的跨度。
Then, do the same for that span.
然后，对该跨度执行相同操作。
回答by Arun P Johny
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
演示：小提琴
回答by The Alpha
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>像这样将代码放在您的标签之间
<head>
<script type="text/javascript">
// code goes here
</script>
</head>
回答by cocco
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
一种方法是编写没有空格的代码并使用 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
第二种方法是再次使用 childNodes[childelement] ：一个空格/制表符/新行是一个孩子
<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
第三种方法是使用 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
但这不是一个好方法。使用 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>
回答by Uni-
In addition to @ArunPJohny, you'd better use CSS.
除了@ArunPJohny，你最好使用CSS。
.pdf-icon-box:hover .name {
background-color: orange;
}
.pdf-icon-box .name {
background-color: green;
}
回答by Mohammad Ismail Khan
I am not sure why don't you use jquery.
我不知道你为什么不使用 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")
});
