Onmouseover change CSS class from other element

Question

I'm trying to make an JS, but since I'm not an expert on that, maybe someone could help me. I was searching for that in Google and in Stack Overflow, but didn't find what I need. I just found onmouseover that change the class in element itself. But I want something different:

I want to make a onmouseover on a tag to change the class closed to open in other element. Example:

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

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

Regards,

Answer 1

You can use <a href="#" onmouseover="changeClass">Link</a>

And JS:

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

More advanced JSFiddle: http://jsfiddle.net/eRdHJ/1/

Answer 2

If you include jQuery:

Add id for your elements:

<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")
})

Answer 3

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

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

Here is the jsfiddle : http://jsfiddle.net/eRdHJ/2/

Answer 4

This will access the first <ul> on the page. To narrow it down you need to do a getElementById first to get the elements based on tag name from that point. It will then only select the children from that tag with that certain ID-name;

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

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

You might want to check if there are any found tho. [0] might trigger an undefined/error if there are no <ul> found.