錨標記中span標記的javascript .style屬性未按預期工作

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

mouseleave上的背景顏色會改變並輸入但不會輸入字體顏色 ......我想我一路上做錯了或者我錯過了一個基本的概念

這是我的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元素上的顏色，但由於子項具有直接應用於它的樣式（即顏色：黑色），因此它不會繼承父樣式。 內聯樣式（即樣式直接應用於具有style =“”屬性的元素，這是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