将鼠标悬停在列表项上以更改不同 div 的属性答案

【问题标题】：Hover over list item to change the attributes of a different div将鼠标悬停在列表项上以更改不同 div 的属性
【发布时间】：2015-01-05 09:09:13
【问题描述】：

当悬停在完全不同的 div 中的列表项时，我正在尝试更改 div 的属性。我已经使用了下面的代码，但这似乎不起作用。谁能帮我理解我应该做些什么不同的事情吗？

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hover {
color:red; 
}
</style>


<script type = "text/javascript">
$('.x').hover(function() {
//Mouse in event
$('.y').addClass('hover');
}, function() {
//Mouse out event
$('.y').removeClass('hover');
 });
</script>

</head>



<body>
<ul>
<div class = "x"> <li>  Hover over me </li> </div> 
</ul>

<div class = "y"> <p>  Result  </p> </div>  
</body>
</html>

【问题讨论】：

tilbe(~) 是一个通用的兄弟运算符，这意味着两个元素必须具有相同的父元素（在本例中为 ul）。我知道通过纯 CSS 无法做到这一点。

标签： javascript css class hover

【解决方案1】：

我建议使用 javascript 来完成这项任务。

我添加了一个 sn-p，它在使用 jquery 悬停列表项时更改 div。

编辑：在body的onload上调用javascript代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hover {
color:red; 
}
</style>


<script type = "text/javascript">
var onLoad = function() {
  $('.x').hover(function() {
    //Mouse in event
    $('.y').addClass('hover');
  }, function() {
    //Mouse out event
    $('.y').removeClass('hover');
 });
}
</script>

</head>



<body onload="onLoad()">
<ul>
<div class = "x"> <li>  Hover over me </li> </div> 
</ul>

<div class = "y"> <p>  Result  </p> </div>  
</body>
</html>

【讨论】：

感谢 Shamun，这正是我一直在寻找的解决方案，但不幸的是我无法让我的代码正常工作。我已经添加到我的 javascript（包含在中）/ css / html 中，但无济于事。知道我做错了什么吗？谢谢
@OneBigEgg 你能发布你的新代码以便我审查吗？
不确定这是否会在评论中出现：

结果