change background image on text hover
-
Hello, I’m working on my website here. I have written html and css just a few times before but I’m a beginner.
I’d like for the entire background of the home page to change to an image whenever you hover the mouse over one of the links on the page, and reset to white when your mouse is no longer over the link.
I’ve searched a number of forums and haven’t found any solutions.
Can anyone help point me in the write direction, or let me know if what I’m trying to achieve isn’t possible with css? Thanks in advance.
The blog I need help with is: (visible only to logged in users)
-
Hi @riverkerstetter ,
I see what you’re trying to do now, thanks for sharing the details.
Because your homepage has multiple links and you want the entire page background to change differently when hovering over each one, this cannot be done with CSS alone.
CSS hover effects are limited and cannot reliably control the full page background based on multiple link interactions.To achieve the behavior you described, JavaScript is required.
It would need to detect which link is being hovered and then dynamically change the page background.
Even basic JavaScript may not be enough, depending on your theme’s structure and how the links are rendered.On WordPress.com, we can help explain CSS basics and where to add custom CSS if your plan allows it.
We are not able to help build or debug custom JavaScript interactions like this.If you want to continue with this effect, the best options are:
- Work with a developer who can implement a JavaScript based solution.
- Use a page builder or theme that already supports advanced hover interactions.
- Experiment outside WordPress.com first using tools like CodePen to prototype the behavior.
Regards,
-
-
- The topic ‘change background image on text hover’ is closed to new replies.
WordPress.com Forums 