Change the Site Logo on Hover

  • [ Moderator note: moved to Fixing WordPress. Please do not use Developing With WordPress for these topics. ]

    Hey everyone,

    I was wondering if any of you know how to change the site logo when you have the cursor over the image. I just want it to change to a different image that I already have uploaded.

    My website is : sjstenger.com.

    I am trying to change the SJS logo to a different color version of it on hover.

    Thanks,
    Steve

Viewing 2 replies - 1 through 2 (of 2 total)

  • Two ways to do this

    CSS

    div {
    background: url('https://placeholdit.co//i/100x100');
}

div:hover {
    background: url('https://placeholdit.co//i/100x100?bg=111111');
}

    Javascript

    function hover(element) {
    element.setAttribute('src', 'https://placeholdit.co//i/100x100?bg=111111');
}
function unhover(element) {
    element.setAttribute('src', 'https://placeholdit.co//i/100x100');
}
    Thread Starter stengersj

    (@stengersj)

    Neither of these change the logo hover option.

    Do I need to modify the theme’s actual header.php file or can I add this to custom css?

    I believe that the element is called ‘site-logo’ and is only really mentioned once in the theme .php file.

    
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change the Site Logo on Hover’ is closed to new replies.