CSS rollover logo in wordpress_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-05 16:07 出处：网络

I\'m trying to apply a CSS image rollover on a Wordpress header logo. I know this will be a really easy solution for you guys but i can\'t seem to find the answer anywhere on Stackoverflow. I think it

I'm trying to apply a CSS image rollover on a Wordpress header logo. I know this will be a really easy solution for you guys but i can't seem to find the answer anywhere on Stackoverflow. I think it may be to do with position but adding either :relative or :absolute seems to make no difference?

below is my CSS

#top {
height: 105px;
padding-left: 10px;
padding-top:27px;
}
#logo {


/*  background-attachment: scroll;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;
 }

 #logo a:hover { 

background-attachment: scroll;
background-image: url('images/flatgrey.png');
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;


 }

 #logo a {

display:block;
height: 70px;
width: 461px;

& PHP

  <body <?php body_class(); ?>>

<div id="outer">
    <div id="top">
        <div id="logo">
            <?php               
            ob_start();
            ob_implicit_flush(0);
            echo get_option('imbalance_custom_logo'); 
            $my_logo = ob_get_contents();
            ob_end_clean();
            if (
            $my_logo == ''
            ): ?>
            <a href="<?php bloginfo("url"); ?>/">
            <img src="<?php bloginfo('template_url'); ?    >/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
            <?php else: ?>
            <a href="<?php bloginfo("url"); ?>/"><img src="<?php echo      get_opt开发者_开发问答ion('imbalance_custom_logo'); ?>" alt="<?php bloginfo('name'); ?>" /></a>             
            <?php endif ?>

I took out the background-attachment and background-position lines for #logo, so the style for #logo was this:

#logo {
background-image: url(images/logo.png);
background-repeat: no-repeat;
height: 70px;
width: 461px;
 }

And that seemed to work for me. Does it solve your problem?

I'm assuming you want to replace logo.png with flatgrey.png on rollover. If that is the case, you should get rid of the whole <img src=".../images/logo.png"...> tag and then add background-image: url('images/logo.png'); to the CSS of #logo a. You will also want to move the background-repeat: no-repeat; line from the CSS of #logo a:hover to #logo a.