0

在 javascript 中，我将如何定位 div 的特定子项，在我的情况下它是一个 span 标签。我想将 CSS 添加到作为 A 标签的子元素的 span 标签中。目前它将旋转添加到悬停的 A 标签。

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

3 回答 3

2

改变

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

至

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

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

于 2013-10-14T11:26:55.337 回答
2

好的旧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 以上动画延迟的评论外，还修改了。

于 2013-10-14T11:19:29.243 回答
1

您的代码将转换应用于锚标记。您需要对其进行更改以将其应用于作为锚的子元素的 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;
                }
            }
        }
    }
}
于 2013-10-14T11:18:00.710 回答