Making my mouseevent coded in jquery a lot more elegant
<p>I wrote this in order to fix the problem IE has with select drop down lists being truncated if their options were longer than the default value of the select. Now it works fine but I want to improve the code in order to learn how to write things in a much more useable fashion. </p>

<pre><code>            $(document).ready(function() {
             if ($.browser.msie) {
                $('select').focus(function() { $(this).addClass('expand').removeClass('clicked'); })
                $('select').blur(function() { $(this).removeClass('expand clicked'); })
                $('select').mousedown(function () { $(this).addClass('expand').removeClass('clicked'); } )
                $('select').hover(function () { }, function () {if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); $(this.blur()) }}) 
                $('select').click (function() { $(this).toggleClass('clicked');  })
                $('select').change(function(){ $(this).removeClass('expand clicked'); $('select.widerIE').blur() })
             }
            });
</code></pre>

<p>I tried making functions which were called by each event but that seemed to fail eg: </p>

<pre><code>            $('select').click(test (a))
                function test (a) {
                     $(a).addClass('expand').removeClass('clicked') 
                    }
</code></pre>
