javascript - Onmouseover 从其他元素更改 CSS 类

Question

我正在尝试制作一个 JS，但由于我不是这方面的专家，也许有人可以帮助我。我在 Google 和 Stack Overflow 中搜索，但没有找到我需要的。我刚刚发现onmouseover改变元素本身的类。但我想要一些不同的东西：

我想制作一个onmouseoverona标签以将类更改为closed其他open元素。例子：

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

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

问候，

Answer 1

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

和 JS：

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

更高级的 JSFiddle：http: //jsfiddle.net/eRdHJ/1/

Answer 2

如果包含 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")
})

Answer 3

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

Answer 4

这将访问<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>

有身份证

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

您可能想检查是否有任何发现。[0]如果没有<ul>找到，可能会触发未定义/错误。