javascript Onmouseover 从其他元素更改 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15887648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onmouseover change CSS class from other element
提问by euDennis
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 onmouseoverthat change the class in element itself. But I want something different:
我正在尝试制作一个 JS，但由于我不是这方面的专家，也许有人可以帮助我。我在 Google 和 Stack Overflow 中搜索，但没有找到我需要的。我刚刚发现onmouseover改变元素本身的类。但我想要一些不同的东西：
I want to make a onmouseoveron atag to change the class closedto openin other element. Example:
我想打一个onmouseover对a标签类更改closed到open其他元素。例子：
<a href="#" onmouseover="<active event>">Link</a>
<a href="#" onmouseover="<active event>">Link</a>
<ul class="dropdown closed"><li>Item</li></ul>
<ul class="dropdown closed"><li>Item</li></ul>
Regards,
问候，
采纳答案by Mihail
If you include jQuery:
如果包含 jQuery：
Add id for your elements:
为您的元素添加 id：
<a href="#" id="a1">Link</a>
<ul class="dropdown closed" id="ul1"><li>Item</li></ul>
Javascript:
Javascript：
$("#a1").mouseover(function(){
$("#ul1").addClass("open").removeClass("closed")
})
回答by Alfred Xing
You can use <a href="#" onmouseover="changeClass">Link</a>
您可以使用 <a href="#" onmouseover="changeClass">Link</a>
And JS:
和JS：
function changeClass() {
document.getElementById("other-element").className = "open";
}
More advanced JSFiddle: http://jsfiddle.net/eRdHJ/1/
更高级的 JSFiddle：http: //jsfiddle.net/eRdHJ/1/
回答by Ranjit Singh
<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/
这是 jsfiddle：http: //jsfiddle.net/eRdHJ/2/
回答by Ranjit Singh
This will access the first <ul>on the page. To narrow it down you need to do a getElementByIdfirst 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;
这将访问<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>
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.
您可能想检查是否有任何发现。[0]如果没有<ul>找到，可能会触发未定义/错误。
