Question

在javascript中我如何定位div的特定子节点，在我的情况下它是span标签。我想将CSS添加到span标记中，该标记是A标记的子标记。目前，它将旋转添加到悬停在其上的A标记。</ p>

function init(){
    document.getElementById("xmas-nav").onmouseover = function(e){
        if(e.target.tagName == "A"){
            e.target.style.WebkitTransform = "rotate(-15deg)";
        }
    }

}

window.addEventListener("load", init, true);


<nav>
    <ul class="xmas-nav" id="xmas-nav">
        <li><a href="#"><span class="xmas-home"></span>Home</a></li>
        <li><a href="#"><span class="xmas-countdown"></span>Countdown</a></li>
        <li><a href="#"><span class="xmas-competition"></span>Competition</a></li>
        <li><a href="#"><span class="xmas-crackers"></span>Crackers</a></li>
        <li><a href="#"><span class="xmas-ideas"></span>Xmas Ideas</a></li>
    </ul>
</nav>

Answer 1

好旧 CSS可以做到。您根本不需要javascript ：

<style>
.xmas-nav li a span {
    /* transition properties are: property being animated, duration, timing function, delay */
    -webkit-transition: -webkit-transform 500ms ease-out;
    -moz-transition: -moz-transform 500ms ease-out;
    -ms-transition: -ms-transform 500ms ease-out;
    -o-transition: -o-transform 500ms ease-out;
    transition: transform 500ms ease-out;
}
.xmas-nav li a:hover span {
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);

    /* in this case the delay will be 1 second */
    -webkit-transition: -webkit-transform 500ms ease-out 1s;
    -moz-transition: -moz-transform 500ms ease-out 1s;
    -ms-transition: -ms-transform 500ms ease-out 1s;
    -o-transition: -o-transform 500ms ease-out 1s;
    transition: transform 500ms ease-out 1s;
}
</style>

修改：除了OP关于改变CSS上方动画延迟的评论之外，还修改了。

Answer 2

更改

e.target.style.WebkitTransform = "rotate(-15deg)";

到

e.target.getElementsByTagName("span")[0].style.WebkitTransform = "rotate(-15deg)";

在底部代码中，您将获得所有span元素并获取返回的第一个元素（假设这是您想要的span元素）。在此span元素上，您将更改样式。

Answer 3

您的代码将转换应用于锚标记。您需要更改它以将其应用于作为锚点子节点的span标记。

function init(){
    document.getElementById("xmas-nav").onmouseover = function(e){
        if(e.target.tagName == "A"){
            var span;
            for (var i = 0; i < e.target.childNodes.length; i++) {
                span = e.target.childNodes[i];
                if (span.tagName === 'SPAN') {
                    span.style.WebkitTransform = "rotate(-15deg)";
                    break;
                }
            }
        }
    }
}

javascript中的CSS层次结构

3 个答案: