doesn't work

<html>
<head>
    <title>Hello world</title>
    <style>
        #random {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="random">
        <script>
            $('#random').on('mouseover',function() {
                var color = '#'+Math.floor(Math.random()*16777215).toString(16);
                var colorString = '0px 0px 30px 0px ' + color;
                $('#random').css('box-shadow',colorString);
                $('#random').css('-webkit-box-shadow',colorString);
                $('#random').css('-mox-box-shadow',colorString);
            });
        </script>
    </div>
</body>
</html>