Question

我正在尝试在wordpress模板上对此徽标实施鼠标悬停效果，但没有成功！你能帮助我吗？我希望在鼠标结束时交换图像的div为<div class="logo">。我怎么能这样做？

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php bloginfo('text_direction'); ?>" xml:lang="<?php bloginfo('language'); ?>">
    <head>
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php wp_title ( '|', true,'right' ); ?></title>
        <meta http-equiv="Content-language" content="<?php bloginfo('language'); ?>" />
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favico.ico" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
        <!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/ie.css" /><![endif]-->
        <?php
            wp_enqueue_script('jquery');
            wp_enqueue_script('cycle', get_template_directory_uri() . '/js/jquery.cycle.all.min.js', 'jquery', false);
            wp_enqueue_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js', 'jquery', false);
            if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
            wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', 'jquery', false);
        ?>
        <?php wp_head(); ?>
        <?php if ( is_home() && !get_option('ss_disable') ) : ?>
        <script type="text/javascript">
            (function($) {
                $(function() {
                    $('#slideshow').cycle({
                        fx:     'scrollHorz',
                        timeout: <?php echo (get_option('ss_timeout')) ? get_option('ss_timeout') : '4000' ?>,
                        next:   '#rarr',
                        prev:   '#larr'
                    });
                })
            })(jQuery)
        </script>
        <?php endif; ?>
    </head>
    <body <?php echo (get_option('bg_color')) ? 'style="background-color: '.get_option('bg_color').';"' : '' ?>>
        <div class="wrapper">

            <div class="header clear">
                <div class="logo">
                    <a href="<?php bloginfo('home'); ?>"><img src="<?php echo (get_option('logo_url')) ? get_option('logo_url') : get_bloginfo('template_url') . '/images/graphicbox.jpg' ?>" alt="<?php bloginfo('name'); ?>"/></a>
                </div>

                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Site description') ) ?>

                <?php get_search_form(); ?>

                <?php wp_nav_menu(array('menu' => 'Top menu', 'theme_location' => 'Top menu', 'depth' => 1, 'container' => 'div', 'container_class' => 'menu', 'menu_id' => false, 'menu_class' => false)); ?>

            </div>

            <?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'depth' => 2, 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'dd', 'menu_id' => 'dd', 'walker' => new extended_walker())); ?>

            <?php if ( is_home() && !get_option('ss_disable') ) get_template_part('slideshow'); ?>

            <!-- Container -->
            <div id="container" class="clear">
                <!-- Content -->
                <div id="content">

Answer 1

如果您只是想在没有花哨动画的情况下交换图像，您甚至可以使用简单的css来交换它，例如像这样：http://jsfiddle.net/S9aQW/（可能不是最好的代码，但它显示了这一点）。

Answer 2

你正在混合一些不同的语言。 Php是服务器端语言，应该/不能用于做客户端的东西，例如在进行鼠标悬停时更改图像。如果你想这样做，你最好的选择是javascript（或css）。我将在下面解释这两种方法。

<强> JAVASCRIPT

如果你想使用javascript，你只需要为你的div添加两个监听鼠标悬停和鼠标移动的监听器。这些听众需要一个javascript函数，并且会发送一个事件，所以我们知道你在盘旋的是什么。

<div class="logo" onmouseover="changeLogo(event)" onmouseout="changeLogo(event)">
    <a href="<?php bloginfo('home'); ?>">
        <img src="<?php get_bloginfo('template_url'); ?>/images/graphicbox.jpg" />
    </a>
</div>

<script language="javascript">
    function changeLogo(e)
    {
        var div = e.currentTarget; //GETS THE DIV
        var a = div.firstChild; //GETS THE FIRST CHILD OF THE DIV, WHICH IS THE A-ELEMENT
        var img = a.firstChild; //GETS THE FIRST CHILD OF THE A-ELEMENT, WHICH IS THE IMG.

        img.src = (img.src == "OLDLINK") ? "YourNewLink" : "OLDLINK"; //SWAPS BETWEEN LINKS
    }
</script>

这就是javascript部分。关于css。

<强> CSS

这实际上是最常用的方法，也是最简单的方法。只需将div包装在a元素中，然后为div设置背景图像。

<a href="<?php bloginfo('home'); ?>">
   <div class="logo"></div>
</a>

<style>
.logo
{
    background-image: url('linkToImage.png');
}

.logo:hover
{
    background-image: url('linkToNewImage.png');
}
</style>

如您所见，此方法更简洁，更容易。由于您使用的是徽标，因此您可以为div设置固定的宽度和高度，这样您就不会有任何问题。我也建议使用这种css方法。

如果您有任何其他问题，请随时提问;）

Onmouseover php页面

2 个答案: