javascript onclick changes styles

Question

i have little animation with picture, i want to change cursor to default ( on picture ), after animation start, if you try my animation, you will see that after onclick function you still have cursor: pointer on pic. but i want there to be default after animation.

my fiddle: http://jsfiddle.net/1u6kbz7q/

HTML

                            <div id="facebook_text">
                                <a href="https://www.facebook.com/rostislav.danko" alt="facebook" target="_blank">Odkaz</a>
                            </div>
                            <div id="facebook_image">
                                <img class="facebook_animation" src="facebook.jpg"></img>
                            </div>
                        <script src="facebook_animation.js" type="text/javascript"></script>

CSS

#facebook_text {
    display: none;
}
#facebook_text a {
    position: absolute;
    font-size: 15px;
    text-decoration: none;
    margin-left: 50px;
    margin-top: 35px;
    z-index: 1;
}
#facebook_text a:hover {
    color: #e5e500;
}
#facebook_image.fly {
    position: absolute;
    margin-left: 125px;
    margin-top: 0px;
    transition: ease-in-out 1s;
}
#facebook_image img {
    position: absolute;
    z-index: 10;    
    height: 35px;
    width: 35px;
    margin-top: 25px;
    transition: ease-in-out 1s;
    cursor: pointer;
}

javascript

document.querySelector('.facebook_animation').onclick=function() {
        var d = document.getElementById("facebook_image");
        d.className = d.className + " fly";
            d.style.cursor = 'default';
        var t = document.getElementById("facebook_text");
        var delayed = setTimeout(function() {
            t.style.display = 'block';
        }, 500);
    }

Your worked with facebook_image instead facebook_animation jsfiddle.net/1u6kbz7q/5 — Mark Zucchini
– Mark Zucchini, Commented Nov 9, 2014 at 10:28

Roko C. Buljan · Accepted Answer · 2014-11-09 10:32:18Z

2

No need to involve JS on that cursor matter: http://jsfiddle.net/1u6kbz7q/3/ you're already adding the .fly, so simply target the .fly's image in CSS

#facebook_image.fly img{
    cursor: default;
}

also <img> is a self-closing tag. no need to use the closing </img>

edited Nov 9, 2014 at 10:32

answered Nov 9, 2014 at 10:22

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript onclick changes styles

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related