Javascript onmouseover="；这是我的风格。。。正在工作，但我需要类似onmouseover的东西；这个孩子_Javascript_Html

Javascript onmouseover="；这是我的风格。。。正在工作，但我需要类似onmouseover的东西；这个孩子

javascript html

Javascript onmouseover="；这是我的风格。。。正在工作，但我需要类似onmouseover的东西；这个孩子,javascript,html,Javascript,Html,这应该很容易，但我不能让它工作。如标题中所述，我想将onmouse更改为span.name（橙色）的背景色 T T S T 我找到了这个但没法用这就是我正在尝试的：它只需要在FF中工作谢谢你的帮助修改代码 <div class="pdf-icon-box" style="position:relative;" onmouseover="this.getElementsByClassName('name')[0].style.backgroundColor = 'yellow'

这应该很容易，但我不能让它工作。如标题中所述，我想将onmouse更改为span.name（橙色）的背景色


T T S T

我找到了这个但没法用

这就是我正在尝试的：

它只需要在FF中工作

谢谢你的帮助

修改代码

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


T T S T

演示：

您正在寻找类似的内容：

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

虽然这很难看，但更好的解决方案是

span.name:hover {
    background:green;
}

在CSS中

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

this.childNodes

获取此的所有子级的列表

索引

[0]

处的第一个节点是文本节点（换行符）

第二个，在索引

[1]

处是您要查找的范围

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

除了@ArunPJohny，您最好使用CSS

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

我不知道为什么不使用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")
});

你也可以试试这个

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>
    <script type="text/javascript">
       // code goes here
    </script>
</head>


//代码在这里

空间是一个子空间。所以，如果你有空格，你就不能得到它

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

第三种方法是使用类名

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


T T S T

但这不是一个好办法。使用css


无标题文件
.name{背景色：黄色；}
.name:hover{背景色：绿色；}
T T S T

@steve不，没有。我想改变橙色的“测试”，为什么不直接使用css呢？是的，现在看到我的答案了。@magritte:hover不工作（它是一个触摸屏），请不要问我为什么，但onmouseover可以工作——那么是的，hover与触摸设备无关。不确定是什么用户体验要求您添加悬停？你是否在寻找：主动？i、当他们真的用手指按压元件时？谢谢！正是我想要的。我搜索和尝试了一个多小时。。。我在哪里可以找到javascript信息来学习，有什么建议吗？有一个很棒的叫做Stack Overflow的网站，很多人都问过同样的问题。但是说真的，伙计们，我想建议使用css，css基础解决方案的问题是当鼠标离开绿色时，绿色就不存在了。在鼠标上方，它是黄色的；在左边，它应该是绿色的，而不是最初的颜色。请注意，尽管span在Javascript中不是div的

firstChild

，但在CSS中它应该是

：first child

。因为CSS只计算元素，而Javascript也计算文本节点。这很公平。在我看来，OP想要超/超效果（悬停），但没什么大不了的。谢谢史蒂夫的解释！因为它在触摸屏上：悬停不起作用，但鼠标悬停起作用（别问我为什么）。我很想用：悬停。。谢谢另外请注意，

getElementsByClassName（）

在IE 9.0之前是不受支持的：（在您的情况下可能不是问题，但是在这种情况下.jsQuery可能会有点过头。并且您只实现了一半的解决方案。$（.pdf图标框”）.hover（函数（）{$（this）。如果您想更改背景颜色，请查找（.name”）.css（“颜色”，“黄色”）/$（this.find（“.name”）.css（“background”，“yellow”）}）.mouseout（function（）{$（this.find（.name”）.css（“background color”，“green”）；}。）。这是完整的解决方案，我不知道为什么jquery“会被过度使用”。

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

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