CSS rollover logo in wordpress
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.
加载中,请稍侯......
精彩评论