在javascript中的CSS層次結構

Question

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

Answer 1

變化

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

到

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

在底部代碼你得到所有span元素，並獲取返回（假設這是你想要的span元素）的第一個

。在這個span元素上，你會改變風格。

Answer 2

您的代碼將轉換應用於錨標記。您需要更改它以將其應用到作爲錨點子項的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; 
       } 
      } 
     } 
    } 
} 

Answer 3

好老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動畫延遲意見進行了修改。