锚点标记中span标记的javascript.style属性未按预期工作

我正在尝试为我的网站设计一些按钮

这是我的html

<div>
    <a class="page_numbers"><span>100</span></a>
    <a class="page_numbers"><span>2</a></span></div>                                                

最后这是我的javascript

var obj=document.getElementsByClassName("page_numbers")
for (i in obj){
 console.log(obj[i].children)
 obj[i].children[0].style.color="black"
 obj[i].style.borderColor="rgb(85,170,255)"
 function jun(i){
 obj[i].addEventListener('mouseenter',function(){obj[i].style.background="yellow";obj[i].style.color="red"},true)
//
obj[i].addEventListener('mouseleave',function(){
    obj[i].style.background="white";
    obj[i].style.color="rgb(12,31,22)";},true)
}
    jun(i);
}

mouseleave上的背景色会发生变化，并输入，但字体颜色不会改变，。我想我在这一过程中犯了一些错误，或者我遗漏了一个基本概念

这是我的JSFIDLE链接

http://jsfiddle.net/repzeroworld/boqv8hak/

---

建议…仍在学习JS

首先，所有这些都应该是CSS，这样做很简单

.page_numbers:hover
{
    background-color: yellow;
}

.page_numbers:hover span
{
    color: red;
}

现在的问题是，在JS的第4行，您显式地将.page_number元素中的子元素（span）的颜色设置为黑色。现在，在鼠标输入时，您正在设置页码元素上的颜色，但由于子元素直接应用了样式（即颜色：黑色），因此它不会继承父样式。内联样式（即直接应用于具有style=”“属性的元素的样式，JS就是这样做的）始终具有最高优先级。这就是为什么在元素上放置内联样式通常不是最佳实践的原因，正如您刚才看到的，它们几乎不可能重写。因此，可以将子对象更改为不具有显式样式，或者在鼠标上输入change子对象而不是父对象

var obj = document.getElementsByClassName("page_numbers")
for (i in obj) {
    console.log(obj[i].children)
    obj[i].children[0].style.color = "black"
    obj[i].style.borderColor = "rgb(85,170,255)"
    function jun(i) {
        obj[i].addEventListener('mouseenter', function () {
            obj[i].style.background = "yellow";
            obj[i].children[0].style.color = "red"
        }, true)
        //
        obj[i].addEventListener('mouseleave', function () {
            obj[i].style.background = "white";
            obj[i].children[0].style.color = "rgb(12,31,22)";
        }, true)
    }
    jun(i);
}

或

---

但正如我指出的，所有这些都应该是CSS中的您试图更改

a

的颜色，而不是

span

像这样试试

obj[i].children[0].style.color = "red"

---

看起来您是在a标记上设置颜色，而不是在MouseleAvehm上设置span标记……但是子元素不会继承父元素的属性吗？……只是想一想，没有，因为span标记上的黑色比a标记上的红色更具体。CSS的特殊性将有利于黑色的span颜色。如果您的结束span标记不在a中，那么只是一个可能防止将来出现问题的注释tag@Binvention..glad你注意到了…我将在我的官方html页面中进行更正我想我对javascript和css的混合使用做得太多了..我只是在测试..我的css技能…：D

var obj = document.getElementsByClassName("page_numbers")
for (i in obj) {
    console.log(obj[i].children)
    obj[i].style.borderColor = "rgb(85,170,255)"
    function jun(i) {
        obj[i].addEventListener('mouseenter', function () {
            obj[i].style.background = "yellow";
            obj[i].style.color = "red"
        }, true)
        //
        obj[i].addEventListener('mouseleave', function () {
            obj[i].style.background = "white";
            obj[i].style.color = "rgb(12,31,22)";
        }, true)
    }
    jun(i);
}

obj[i].children[0].style.color = "red"