Javascript Wordpress将鼠标悬停在链接上，几个元素会发生变化

此wordpress主页的内容部分（中间部分有三列div）包含以下html

[widgets\on\u pages id=“主页中间框”]
社会化媒体
//社交媒体的东西
示例客户端
如果你在初级医疗机构工作，你知道任何事情都有可能发生
 您的员工可能需要处理困难的

如您所见，左侧有一个扇区列表，它是wordpress菜单、中心图像、中心文本，右侧是一个示例客户端

请记住，这个网站是用wordpress编写的，上面的内容是在wordpress的“编辑页面”部分输入的，而不是在模板中输入的（尽管我可以完全访问模板文件），有谁能告诉我一种方法，让用户将鼠标悬停在左边的一个扇区上，然后是中央图像，中心文本和右侧客户端图像都会更改以匹配悬停的扇区

---

我遇到的主要问题是Wordpress菜单中的扇区列表，如果可能的话，我希望保持这种状态，但如果需要，我可以硬编码

您需要使用jQuery

这应该让你开始：

$('#menu-item-65').mouseover(function() {
    // when element is moused over, change html elsewhere on page
    $('.top-area .image').html('<img src="path/to/your/image.jpg" />');
    $('.home_side_box .clients').html('<img src="path/to/your/other/image.jpg" />');
    $('#scenario_intro_text_div').html('<p>Your text here</p>');
});

$（'#菜单项-65'）。鼠标悬停（函数（）{
//当元素被鼠标移过时，在页面的其他地方更改html
$（'.top-area.image'）.html（''）；
$（'.home\u side\u box.clients'）.html（''）；
$（'scenario'u intro_text'u div'）.html（'p>此处的文本
'）；
});

第一行基本上意味着当鼠标覆盖

#menu-item-65

（左侧“扇区”导航菜单中单个

li

s之一的id）时，它将用您指定的内容替换函数中目标元素的内部HTML

相关链接：

您的主题已经加载了jQuery，因此您只需将其包含在自定义脚本文件中并确保已加载（将脚本调用放入

header.php

，或者通过

wp\u enqueue\u script

添加到

functions.php

）

$('#menu-item-65').mouseover(function() {
    // when element is moused over, change html elsewhere on page
    $('.top-area .image').html('<img src="path/to/your/image.jpg" />');
    $('.home_side_box .clients').html('<img src="path/to/your/other/image.jpg" />');
    $('#scenario_intro_text_div').html('<p>Your text here</p>');
});