CSS transitions not effecting HTML generated by Javascript

Question

I have a css transform that rotates objects on hover.

.rotate { transition: 0.2s; }
.rotate:hover { transform: rotate(20deg); }

This works perfectly fine when applied to a hard coded HTML element.

However the page contains a script that generates more HTML and inserts it into a div (div.innerHTML = newHTML).

The css transitions do not work on any elements generated by the script.

Why would this be the case and how can it be corrected?

EDIT: Here is a simplified example that shows my code, however I'm unable to get the example to work at all, the hard coded rotate and the generated html don't rotate and I have no idea why.

<!doctype html>
    <head>
        <style>
            .rotate {
                transition: 0.2s;
            }

            .rotate:hover {
                transform: rotate(20deg);
            }
        </style>
    </head>
    <body>
        <a class="rotate" href="#">A test text</a>
        <div id="plot"></div>
        <script>

            function makeHTML()
            {
                return '<a class="rotate" href="#">I am a HTML link</a>';
            }

            var plot = document.getElementById('plot');

            var text = makeHTML();

            plot.innerHTML = text;

        </script>
    </body>
</html>

Can't reproduce it ~ jsfiddle.net/6Lpvaooc. You sure your JavaScript is adding the correct classes to the new elements? — Phil
– Phil, Commented Jul 28, 2017 at 0:09
What you describe is not technically possible. If they have those classes and the transition and transform properties are not overridden by rules applied by more specific selectors in your CSS, the ones you specified should apply. The simplest way to figure it out is to inspect the added elements, go to "Computed" (near "Styles") tab and check what's specified in transition and transform properties for the element. It will also tell you what rule sets them. Without a minimal reproducible example we can't help you more than this. — tao
– tao, Commented Jul 28, 2017 at 0:33
That is not a minimal reproducible example. It would be an example if it worked. I figured out what your problem is, answering now, with example. — tao
– tao, Commented Jul 28, 2017 at 0:40

tao · Accepted Answer · 2017-07-28 00:52:24Z

3

transform only applies to block-level elements. By default, <a> elements have display:inline. So you need to apply display: inline-block;, for the transform to work:

function makeHTML() {
  return '<a class="rotate" href="#">I am a HTML link</a>';
}

var plot = document.getElementById('plot'),
  text = makeHTML();

plot.innerHTML = text;

.rotate {
  transition: 0.2s;
  display: inline-block;
}

.rotate:hover {
  transform: rotate(20deg);
}

<a class="rotate" href="#">A test text</a>
<div id="plot"></div>

edited Jul 28, 2017 at 0:52

answered Jul 28, 2017 at 0:41

tao

91.1k18 gold badges136 silver badges174 bronze badges

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

Collectives™ on Stack Overflow

CSS transitions not effecting HTML generated by Javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related