将鼠标悬停在列表项上可更改其他div的属性

Question

I am trying to make the attributes of a div change when a list item in a completely different div is hovered over. 当悬停在完全不同的div中的列表项时，我试图更改div的属性。 I have used the code below but this doesn't seem to work. 我使用了下面的代码，但这似乎不起作用。 Can anybody help me understand what I should be doing differently please? 有人可以帮我了解我应该做些什么吗？

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

Answer 1

I recommend using javascript for this task. 我建议使用javascript来完成此任务。

I added a snippet that changes the div when the list item is hovered using jquery. 我添加了一个片段，该片段在使用jquery悬停列表项时更改了div。

Edit: Call the javascript code on the onload of the body 编辑：调用onbody的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>

将鼠标悬停在列表项上可更改其他div的属性

问题描述

1 个解决方案

解决方案1
0 2014-11-08 19:02:48

将鼠标悬停在列表项上可更改其他div的属性

问题描述

1 个解决方案

解决方案1 0 2014-11-08 19:02:48

解决方案1
0 2014-11-08 19:02:48