gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:03:28 24 4
gpt4 key购买 nike

当悬停在完全不同的 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>

最佳答案

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

我添加了一个片段,当列表项悬停时使用 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>

关于javascript - 将鼠标悬停在列表项上以更改不同 div 的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26820499/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com