Question

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

这是我的HTML

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

这是我的CSS

.page_numbers{
    display:table-cell;
    border:solid;
    padding:0px;
    border-radius:100px;
    width:50px;
    height:50px;
    text-align:center;
    vertical-align:middle;

}
div {
    display:table;
    border-spacing:10px;
}
}

最后这是我的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);
}

鼠标移动时背景颜色发生变化并输入但不输入字体颜色 ...我想我一路走错了或者我错过了一个基本概念

这是我的jsfiddle链接

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

建议请...继续学习JS

Answer 1

首先，所有这些都应该在CSS中，并且这样做很简单

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

.page_numbers:hover span
{
    color: red;
}

现在您遇到的问题是，在JS的第4行，您明确将.page_number元素内的子元素（span）的颜色设置为黑色。现在，您在鼠标输入上设置了page_number元素上的颜色，但由于该子项直接应用了它（即颜色：黑色），因此它不会继承父样式。内联样式（即样式直接应用于具有样式=＆＃34;＆＃34;属性的元素，这是JS所做的）始终具有最高优先级。这就是为什么在元素上放置内联样式通常不是最好的做法，正如您刚才所见，它们几乎不可能覆盖。因此，要么改变孩子没有明确的风格，要么改变鼠标输入改变孩子而不是父母

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

或

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

但正如我所指出的，这一切应该在CSS

中

Answer 2

您尝试更改a而不是span

的颜色

试试这个

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

的 JSFIDDLE

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

2 个答案: