Question

应该很容易，但我不能让它工作。如标题中所述，我想在span.name（orange）

的背景颜色上更改onmouse

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

我发现了这个但是不能让它起作用 Get Element By using Class name

这就是我正在尝试的：fiddle is here

它只需要在FF中工作

感谢您的帮助！

Answer 1

你正在寻找这样的东西：

onmouseover="this.childNodes[1].childNodes[1].style.background='green'";

这非常难看，更好的解决方案是

span.name:hover {
    background:green;
}

CSS中的

。

解释JS，以防它有用：

this.childNodes

获取this的所有孩子的列表。

索引[0]的第一个是文本节点（换行符）。

第二个，索引为[1]，是您正在寻找的范围。

然后，在那个范围内做同样的事情。

Answer 2

修改代码

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

演示：Fiddle

Answer 3

你也可以试试这个

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

只需将代码放在<head>标签之间，就像这样

<head>
    <script type="text/javascript">
       // code goes here
    </script>
</head>

Example.

Answer 4

除了@ArunPJohny之外，你最好使用CSS。

.pdf-icon-box:hover .name {
    background-color: orange;
}
.pdf-icon-box .name {
    background-color: green;
}

Answer 5

我不确定你为什么不使用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")
});

Answer 6

SPACE是一个孩子。所以，如果你之间有空格，你就无法得到它。

一种方法是编写没有空格的代码并使用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>

第二种方法是再次使用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>

第三种方法是使用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>

但这不是一个很好的方法。使用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>

onmouseover =“this.style ...正在运行，但我需要像onmouseover =”this.child.child这样的东西

6 个答案: