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

Wordpress hover over link and several elements change

本文关键字：几个元素变化发生了鼠标悬停链接 Wordpress 更新时间：2023-09-26

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