Onmouseover從其他元素更改CSS類

我想做一個JS，但因爲我不是一個專家，也許有人可以幫助我。我在Google和Stack Overflow中搜索，但沒有找到我需要的。我剛發現onmouseover改變了元素本身的類。但是，我想不同的東西：Onmouseover從其他元素更改CSS類

我想打一個onmouseover上a標籤類closed更改爲open其他元素。例如：

<a href="#" onmouseover="<active event>">Link</a>

<ul class="dropdown closed"><li>Item</li></ul>

問候，

來源

2013-04-08 euDennis

如果包括jQuery的：

添加ID爲您的元素：

<a href="#" id="a1">Link</a> 
<ul class="dropdown closed" id="ul1"><li>Item</li></ul>

的Javascript：

$("#a1").mouseover(function(){ 
    $("#ul1").addClass("open").removeClass("closed") 
})

來源

2013-04-08 19:57:05 Mihail

感謝。這正是我所需要的，但沒有像我想的那樣工作......我試圖從Foundation 4使用鼠標懸停（「Os Desbravadores」菜單：http://bit.ly/11eY85I）製作下拉菜單， – euDennis 2013-04-09 17:40:17

這將訪問頁面上的第<ul>。要縮小它的範圍，您需要首先執行getElementById以從該點獲取基於標籤名稱的元素。然後它只會從該標籤中選擇具有該特定ID名稱的孩子;

<script> 
    function changeUl() { 
     // Get the first found UL, anywhere in the body 
     document.getElementsByTagName('ul')[0].className = 'otherName'; 
    } 
</script> 

<a href="#" onmouseover="changeUl();">Link</a>

隨着ID

<script> 
    function changeUl() { 
     var wrapper = document.getElementById('wrapper'); 
     wrapper.getElementsByTagName('ul')[0].className = 'otherName'; 
    } 
</script> 

<div id="wrapper"> 
    <a href="#" onmouseover="changeUl();">Link</a> 
</div>

您可能要檢查是否有任何發現的壽。如果找不到<ul>，可能會觸發未定義的錯誤。

來源

2013-04-08 19:52:25

您可以使用<a href="#" onmouseover="changeClass">Link</a>

和JS：

function changeClass() { 
    document.getElementById("other-element").className = "open"; 
}

更先進的jsfiddle：http://jsfiddle.net/eRdHJ/1/

來源

2013-04-08 19:55:39

<a href="#" onmouseover=$("ul.dropdown").addClass("open").removeClass("closed")>Link</a> 

<ul class="dropdown closed"><li>Item</li></ul>

這裏是的jsfiddle：http://jsfiddle.net/eRdHJ/2/

來源

2013-04-08 20:04:33

Onmouseover從其他元素更改CSS類

回答

相關問題