2

应该很容易，但我无法让它工作。如标题中所述，我想从 span.name （橙色）更改 onmouseover 的背景颜色 

<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

这就是我正在尝试的：小提琴在这里

它只需要在FF中工作

感谢帮助！

4

6 回答 6

3

你正在寻找这样的东西：

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

虽然这很丑陋，但更好的解决方案是

span.name:hover {
    background:green;
}

在 CSS 中。

为了解释 JS，如果它有帮助：

this.childNodes

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

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

第二个，在 index[1]是您正在寻找的跨度。

然后，对该跨度执行相同的操作。

于 2013-07-04T08:17:38.800 回答
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>

演示：小提琴

于 2013-07-04T08:16:09.883 回答
1

你也可以试试这个

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>

例子。

于 2013-07-04T08:28:02.840 回答
0

我不确定你为什么不使用 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")
});
于 2013-07-04T08:24:59.587 回答
0

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

.pdf-icon-box:hover .name {
    background-color: orange;
}
.pdf-icon-box .name {
    background-color: green;
}
于 2013-07-04T08:19:39.657 回答
0

一个空间是一个孩子。因此，如果您之间有空格，则无法获得。

一种方法是编写没有空格的代码并使用 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>
于 2013-07-04T08:36:57.107 回答