javascript中的CSS层次结构

在javascript中，在我的例子中，如何将div的特定子对象作为span标记。我想向span标记添加CSS，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>

函数init（）{
document.getElementById（“xmasnav”）.onmouseover=function（e）{
如果（e.target.tagName==“A”）{
e、 target.style.webkitttransform=“旋转（-15度）”；
}
}
}
addEventListener（“加载”，init，true）；

您的代码将转换应用于锚定标记。您需要对其进行更改，以将其应用于作为锚点子级的跨度标记

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

函数init（）{
document.getElementById（“xmasnav”）.onmouseover=function（e）{
如果（e.target.tagName==“A”）{
var跨度；
for（var i=0；i

您的代码将转换应用于锚定标记。您需要对其进行更改，以将其应用于作为锚点子级的跨度标记

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

函数init（）{
document.getElementById（“xmasnav”）.onmouseover=function（e）{
如果（e.target.tagName==“A”）{
var跨度；
for（var i=0；i

好老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>

.xmas nav li a span{
/*过渡属性包括：设置动画的属性、持续时间、计时功能、延迟*/
-webkit转换：-webkit转换500毫秒缓解；
-moz转换：-moz转换500ms放松；
-ms转换：-ms转换500ms缓解；
-o型转换：-o型转换500ms缓解；
过渡：500毫秒的过渡放松；
}
.xmas nav li a：悬停跨度{
-webkit变换：旋转（-15度）；
-moz变换：旋转（-15度）；
-ms变换：旋转（-15度）；
-o变换：旋转（-15度）；
变换：旋转（-15度）；
/*在这种情况下，延迟将为1秒*/
-webkit转换：-webkit转换500毫秒缓变1秒；
-moz转换：-moz转换500ms放松1s；
-ms转换：-ms转换500ms放松1s；
-o型转换：-o型转换500ms，放松1s；
转换：转换500ms，放松1s；
}

编辑：

---

除了OP关于修改CSS上面的动画延迟的评论之外，CSS也被修改了。

好老的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>

.xmas nav li a span{
/*过渡属性包括：设置动画的属性、持续时间、计时功能、延迟*/
-webkit转换：-webkit转换500毫秒缓解；
-moz转换：-moz转换500ms放松；
-ms转换：-ms转换500ms缓解；
-o型转换：-o型转换500ms缓解；
过渡：500毫秒的过渡放松；
}
.xmas nav li a：悬停跨度{
-webkit变换：旋转（-15度）；
-moz变换：旋转（-15度）；
-ms变换：旋转（-15度）；
-o变换：旋转（-15度）；
变换：旋转（-15度）；
/*在这种情况下，延迟将为1秒*/
-webkit转换：-webkit转换500毫秒缓变1秒；
-moz转换：-moz转换500ms放松1s；
-ms转换：-ms转换500ms放松1s；
-o型转换：-o型转换500ms，放松1s；
转换：转换500ms，放松1s；
}

编辑： 除了OP关于修改CSS上方动画延迟的评论之外，CSS也被修改。

change

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

到

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

变化

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

到

---

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

为什么不使用？您可以尝试e.target.getElementsByTagName（“span”）[0].style.webkittTransform=“rotate（-15deg）”；^这是一个很好的解决方案，感谢您将其作为参考答案：）为什么不使用？您可以尝试e.target.getElementsByTagName（“span”）[0].style.webkittTransform=“rotate（-15deg）”；^这是一个很好的解决方案，感谢您将其作为参考答案：）元素可以嵌套。。所以还要提到子选择器。我试图让它在一个方向上旋转，然后在一个时间延迟后在另一个方向上旋转。另一个编辑。代码中有一个小错误。现在它应该可以很好地工作了。元素可以嵌套。。所以还要提到子选择器。我试图让它在一个方向上旋转，然后在一个时间延迟后在另一个方向上旋转。另一个编辑。代码中有一个小错误。现在它应该可以完美地工作了。