这个wordpress主页有以下内容部分的html(中间部分有三列div(
http://goodsense.etempa.co.uk
<div class="seewidgets">[widgets_on_pages id="Home page middle box"]</div>
<div class="top-area">
<div class="image">
<img alt="Primary Care" src="/wp-content/uploads/scenarios/primary_care.png" />
</div>
<div id="contact_box" class="home_side_box">
<div class="clients">
<img alt="Contact Us" src="/wp-content/uploads/buttons/contact_button.png" />
</div>
</div>
<div class="home_side_box home_side_box_gap">
<div class="home_side_box_heading">Social Media</div>
//Social Media Stuff
</div>
<div class="home_side_box home_side_box_gap">
<div class="home_side_box_heading">Example Clients</div>
<div class="clients">
<img alt="" src="/wp-content/themes/twentytwelve/images/client.png" />
</div>
</div>
<div class="home_text_box" id="scenario_intro_text_div">
<p>If you work in primary healthcare you know that anything can happen. </p><p>Your staff may be required to handle a difficult ... <a href='/primary-care'>Read More</a></p>
</div>
</div>
</div>
</div>
正如你所看到的,左边有一个Sectors列表,它是一个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>');
});
第一行基本上意味着当鼠标悬停#menu-item-65
(左侧"Sectors"导航菜单中单个li
的id(时,它会用您指定的内容替换函数内部目标元素的内部HTML。
相关链接:
- http://api.jquery.com/html/
- http://api.jquery.com/mouseover/
- http://www.w3.org/TR/CSS2/selector.html
您的主题已经加载了jQuery,因此您只需要将其包含在自定义脚本文件中,并确保它已加载(将脚本调用放在header.php
中,或通过wp_enqueue_script
添加到functions.php
中(。