在chrome上的Jquery悬停事件问题

Question

当我尝试使用jQuery更改元素的内容时遇到问题。在Internet Explorer中一切正常，但在谷歌浏览器中，鼠标悬停动作可以正常工作但鼠标输出事件没有任何改变！这是我的代码：

$(".changedata").hover(function() {
  $(this).html('<span class="rate">8.9</span>');
}, function() {
  $(this).html('<i class="material-icons">star</i>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="changedata">
  <i class="material-icons">star</i>
</div>

Answer 1

以某种方式它通过这种变化起作用：

$(".changedata").hover(
         function () {
            var value = $(this).attr('data-change');
            $(this).html(value);

        },
        function(){
             $(this).html('<i class="material-icons">star</i>');

        }
    );