Change page background when hovering over a link-CodePudding

I want to have two different links and when hovering over one it changes the entire PAGE background to a different background-image-url. Then when I hover over the second link it changes the background-image-url to another picture. Is this possible? I am using Angular, I was thinking at first I could do this in css but I now think something more will be required. Any guidance would be greatly appreciated.

CodePudding user response：

It won't be possible with pure CSS because selectors are unable to ascend.

What you're trying to achieve can be easily done though. Just attach hover events to the links and in the event handlers, add a certain CSS class to the page. And then define the styles for that class of course.

To add the class, what you need to do is set a state value to a certain value and in the page element, add *ngClass="{bgLink1: hovered === 'link1'}" or something like that. You get the idea.

CodePudding user response：

<!DOCTYPE html>
<html>
<body>
    <a href="https://stackoverflow.com" id="link1"></a>
    <a href="https://stackoverflow.com/questions" id="link2"></a>
</body>
<style>
body {
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
}

#link1 {
    margin: 5vw;
}

#link2 {
    margin: 5vw;
}

#link1:hover body {
    background: url('');/*any url you want for the picture*/
}

#link2:hover body {
    background: url('');/*another url you wanr for th other picture*/
}
</style>
</html>

I really hope I could help you, if not it wouldn't hurt to write the question another time but with code or something so I can understand what you want