Question

当一个完全不同的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>

Answer 1

我建议使用javascript执行此任务。

我添加了一个片段，当使用jquery悬停列表项时会更改div。

编辑：在正文的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>

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

1 个答案: