javascript - Wordpress 将鼠标悬停在链接上，几个元素发生了变化

Question

这个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>

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

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

我遇到的主要问题是部门列表在 Wordpress 菜单中，如果可能的话，我希望它保持这种状态，但如有必要，我可以硬编码。

score 2 · Accepted Answer

您需要使用 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（左侧“扇区”导航菜单中的一个lis 的 id），它将用您指定的任何内容替换函数内部目标元素的内部 HTML。

javascript - Wordpress 将鼠标悬停在链接上，几个元素发生了变化

1 回答 1

Related

Reference