将鼠标悬停在 php 页面上

发布于 2024-12-02 15:16:52 字数 3889 浏览 4 评论 0原文

我正在尝试在 WordPress 模板上实现此徽标的鼠标悬停效果，但没有成功！你能帮助我吗？我想要在鼠标悬停时交换图像的 div 是

。我怎样才能做到这一点？

这是代码：

<!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">

原文

I'm trying to implement a mouseover effect to this logo on a wordpress template, without success! Can you help me? The div I want to swap image while mouse is over is <div class="logo">. How can I do that?

Here is the code:

<!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">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独留℉清风醉 2024-12-09 15:16:52

如果你只想交换图像而不需要花哨的动画，你甚至可以使用简单的 css 来交换它，例如： http: //jsfiddle.net/S9aQW/（可能不是最好的代码，但它表明了这一点）。

回复收藏 0 原文

抚你发端 2024-12-09 15:16:52

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

JAVASCRIPT

如果你想使用 JavaScript，你只需要在你的 div 中添加两个监听器来监听 mouseover 和 mouseout。这些侦听器调用 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 方法。

如果您还有任何其他问题，请随时询问；）

You are mixing up some different languages. Php is a server side language and should/can not be used to do client side stuff, e.g. changing an image while doing a mouseover. If you want to do this, your best option is javascript (or css). I will explain both methods below.

JAVASCRIPT

if you want to use javascript, you just need to add two listeners to your div that listen to mouseover and mouseout. These listeners call for a javascript function and wil send an event, so we know what you are hovering over.

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

So that's it for the javascript part. On to the css.

CSS

This is in fact the most used approach and also the easiest one. just wrap your div in an a-element and set a background-image for your 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>

as you can see, this method is cleaner and easier. And since you are using a logo, you can set a fixed width and height for your div, so you won't have any problems. I also recommend to use this css-approach.

If you have any other questions, feel free to ask ;)

回复收藏 0 原文

~没有更多了~