Forums

WordPress › Support » Themes and Templates

Change Background Color and Header Text color on Mouseover (2 posts)

  1. ianifer1
    Member
    Posted 8 months ago #

    Hi,

    I'm trying to change my theme so that when you mouse over the header text, it changes the header text color and the background color simultaneously. I can get the text to change and the immediate background to change color but I can't get the whole page's background to change color. Any ideas.

    I started with the most recent edition of a theme called sharpfolio but I just used it as a jumping off point as it was a very clean simple theme so it's not really the same anymore. I'm really new to writing code but I'm a quick study, I just don't know how to problem solve these things yet so even if the answers complex I'd appreciate it.

    Here's my site, such as it is, if that helps with anything: ianiferrier.com

  2. Digital Raindrops
    Member
    Posted 8 months ago #

    The backgound is a part of the body then you would also have a page and content style this has already been loaded before the header area, and the mouse over can only change styles for that element.

    If you added a hover style to the body or page it would change all the time.

    Not sure what you are trying to achive here, have a Google search to see if there is a jquery script, rather than css?

    Something in the <head> </head> tag section in header.php, you would need to set the repeat style as well, I am not that familiar with JQuery.
    UNTESTED Example Sheet

    <script type="text/javascript">
$('#header').mouseover(function(){
	$('#wrapper').css({ backgroundImage : "url(images/background/my-background.png)" });
});
</script>

    UNTESTED Example Body

    <script type="text/javascript">
$('#header').mouseover(function(){
	$('body').css({ backgroundImage : "url(images/background/my-background.png)" });
});
</script>

    David

Reply

You must log in to post.

About this Topic

Tags