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菜单中，如果可能的话，我希望它保持这种状态，但如果有必要，我可以硬编码。

Answer 1

你需要使用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（左侧“扇区”导航菜单中的一个li的id）被鼠标覆盖时，它会替换目标元素的内部HTML在函数内部，无论你指定什么。

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

1 个答案: