How to Triger a css animation for a y element from a a trigger x


Tags: javascript,html,css

Problem :

I want to animate my body background when i hover over a link, can someone help me with that.

I have a animation "myfirst" that changes the background colour,

@keyframes myfirst
{
from{background: black;}
to{background: white;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from{ background: black;}
to{background: white;}

}

Right now i have made it so that when i hover body the animation is triggered.

body:hover{
animation: myfirst 0.01s;
animation-iteration-count:500;
-webkit-animation: myfirst 0.01s;
-webkit-animation-iteration-count:500;
}

I want that a link triggers the animation that changes my bodies background.



Solution :

As other's have said, in order to change the body when an element is clicked, you'd need to have a parent selector. Since CSS has no parent selector capability, you will have to use a little javascript

// Set onclick function for the element you want
document.getElementById('changeBG').onmouseover = function() { 
    document.body.style.animation = "myfirst 0.01s 500"; //Give the body the anim
    // The above could also be done by adding a class with the animation 
    // properties on click
};

Demo here

However, if you only want the background to flash when the link is hovered and to stop otherwise, you could do it in pure CSS using another HTML element (a kind of fake body). It requires that the fake-body element follow the link in the document flow like so

<a id='changeBG' href='#'>Change background</a>
<div id='cover'></div>

and the CSS for that fake-body element

#cover {
    position:absolute; /* Don't affect other elements */
    top:0; left:0; /* Fill up the entire viewport */
    width:100%;
    height:100%;
    z-index:-1; /* Be placed behind all other elements */
}

You would then use a sibling selector (I use + which is the directly following sibling) and :hover to give the animation to the fake-body

#changeBG:hover + #cover {
    -webkit-animation: myfirst 0.01s 500;
    animation: myfirst 0.01s 500;
}

Demo of that approach


    CSS Howto..

    How to make diagonal div

    How to change css styles on alloy-ui form validator?

    How to close this menu clicking outside?

    How can fixed element push content down the page using CSS only?

    How to remove “pictureframe” in Internet Explorer?

    How to remove the white background from Bootstrap carousal?

    How to style a form action [closed]

    How to create responsive square

    How to get divs 100% of browser using css?

    How to position footer correctly with css?

    How to get dimensions for a background image when background-size is set to contain?

    CSS Transition - how to make a text coming from the top side?

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

    How to fix smooth text in IE?

    How to remove the arrows in a scroll bar through CSS

    How to cancel an upstream CSS declaration?

    How to display UpdateProgress at the center of a grid view with CSS?

    How to make a scrollable div inside of a div with a specific height

    How to import a selector style into another selector style?

    How to change or remove quote symbol in css

    How to make this loading overlay effect responsive?

    How do I make the cursor stay as a pointer on text using jquery/javascript?

    How to calculate rotation angle from rectangle points?

    How to limit a to only three lines?

    how to add css on click and remove it when they click close button [closed]

    How can I give an image a black opaque overlay?

    CSS - Table mode how to display correctly?

    How to let a div behave like another div?

    How to set content to -webkit-slider-thumb

    How to get the system accent color for UWP-Apps?