Q:

jquery mousenter and mouseleave with chrome

i have dropdown list : select tag , i want to show foreach option a hided image , so i used mouseenter event and mouveleave enevent , it work fine for mozila firefox but not for google chrome ,  i use jquery 1.9.1 
this is my code :
<select id="Coloration" name="Coloration"><option></option>
<option>rouge</option>
<option>jaune</option>
<option>verte</option>
<option>mauve</option>
<option>bleue</option>
</select>

<img src="@Url. Content("~/img/coloration/0.png")" id="cl0" style="display:none"/>
<img src="@Url. Content("~/img/coloration/1.png")" id="cl1"  style="display:none" />
<img src="@Url. Content("~/img/coloration/2.png")" id="cl2"  style="display:none" />
<img src="@Url. Content("~/img/coloration/3.png")" id="cl3"  style="display:none" />
<img src="@Url. Content("~/img/coloration/4.png")" id="cl4"  style="display:none" />

<script>

        $(function () {

            $("#Coloration option").each(function () {

                $(this).mouseenter(function () {
                    var value = $(this).html();
                    if (value ! = "") {
                        switch (value) {
                            case "rouge": $("#cl0").show();
                                break;
                            case "jaune": $("#cl1").show();
                                break;
                            case "verte": $("#cl2").show();
                                break;
                            case "mauve": $("#cl3").show();
                                break;
                            case "bleue": $("#cl4").show();
                                break;
                        }
                    }
                });

                $(this).mouseleave(function () {

                    var value = $(this).html();
                    if (value ! = "") {
                        switch (value) {
                            case "rouge": $("#cl0").hide();
                                break;
                            case "jaune": $("#cl1").hide();
                                break;
                            case "verte": $("#cl2").hide();
                                break;
                            case "mauve": $("#cl3").hide();
                                break;
                            case "bleue": $("#cl4").hide();
                                break;
                        }
                    }

                });

            });

        });
    </script>

A:

May I ask why you're using mouseenter and mouseleave events for a dropdown menu?  Are you sure you don't want the image to change when the dropdown selection changes?  
Unfortunately, you cannot capture mouseenter and mouseleave events for the option elements of a dropdown select element (similar to how you can't apply most CSS styling to them).  
You could, instead, change your select element to be of the multiple type: 
http://jsbin.com/kolab/1/edit
<! DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
      .hide {
        display: none;
      }
    </style>
  </head>

  <body>

    <select multiple id="coloration">
      <option selected disabled></option>
      <option id="rougeOpt" onmouseover="changeImg(this.id);">rouge</option>
      <option id="jauneOpt" onmouseover="changeImg(this.id);">jaune</option>
    </select>

    <img id="rouge" value="rouge" class="hide" src="http://1.bp.blogspot.com/-KOoE7w_4hPE/UZ4W6MZSmzI/AAAAAAAAPHQ/LWx1l4BjMRE/s640/lotsa__red_roses_Wallpaper_wq7bu44.jpg" />
    <img id="jaune" value="jaune" class="hide" src="http://www.247miami.tv/wp-content/uploads/2013/07/yellow-ballons.jpg" /> 

    <script>

      var changeImg = function(value) {
        switch(value) {
          case 'rougeOpt':
            $('#rouge').removeClass('hide').addClass('show');
            $('#jaune').removeClass('show').addClass('hide');
            break;
          case 'jauneOpt':
            $('#rouge').removeClass('show').addClass('hide');
            $('#jaune').removeClass('hide').addClass('show');
            break;
        }
      };

      $(function() {
        $("#coloration").mouseout(function() {
          $('#jaune').removeClass('show').addClass('hide');
          $('#rouge').removeClass('show').addClass('hide');
        });
      });

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

Alternatively, you could try adding style and behavior to a set of custom divs that would recreate the effect you desire (of course, you would want to style and script these further to your exact preference; this is intended to be a demonstration of concept): 
http://jsbin.com/qubor/1/edit
<! DOCTYPE html>
<html>
  <head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
      .select {
        width: 100px;
        height: 20px;
        background-color: lightgray;
        margin-bottom: 50px;
      }
      .option {
        width: 100px;
        height: 20px;
        background-color: lightgray;      
      }
      .hide {
        display: none;
      }
    </style>
  </head>

  <body>

    <div class='select'>
      <div class='option hide'></div>
      <div class='option hide'>rouge</div>
      <div class='option hide'>jaune</div>
    </div>

    <div class='image'>
      <img id="rouge" value="rouge" class="hide" src="http://1.bp.blogspot.com/-KOoE7w_4hPE/UZ4W6MZSmzI/AAAAAAAAPHQ/LWx1l4BjMRE/s640/lotsa__red_roses_Wallpaper_wq7bu44.jpg" />
      <img id="jaune" value="jaune" class="hide" src="http://www.247miami.tv/wp-content/uploads/2013/07/yellow-ballons.jpg" /> 
    </div>

    <script>

      $(function () {

        $('.select').on('click', function() {
          $('.option').toggle('.hide');
        });

        $('.option').on('mouseenter', function () {
          var value = $(this).text();
          switch(value) {
            case 'rouge':
              $('#rouge').removeClass('hide').addClass('show');
              $('#jaune').removeClass('show').addClass('hide');
              break;
            case 'jaune':
              $('#rouge').removeClass('show').addClass('hide');
              $('#jaune').removeClass('hide').addClass('show');
              break;
          }

        });
      });
    </script>
  </body>
</html>

Next is code to hide/show images based on actual dropdown selections:
http://jsbin.com/qosave/1/edit
<! DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
      .hide {
        display: none;
      }
    </style>
  </head>

  <body>

    <select id="coloration" name="Coloration">
      <option selected disabled></option>
      <option>rouge</option>
      <option>jaune</option>
      <--!  Add more options here. -- >
    </select>

    <img id="rouge" value="rouge" class="hide" src="http://1.bp.blogspot.com/-KOoE7w_4hPE/UZ4W6MZSmzI/AAAAAAAAPHQ/LWx1l4BjMRE/s640/lotsa__red_roses_Wallpaper_wq7bu44.jpg" />
    <img id="jaune" value="jaune" class="hide" src="http://www.247miami.tv/wp-content/uploads/2013/07/yellow-ballons.jpg" /> 
    <--!  Add more images here. -- >

    <script>

      $(function () {

        $("#coloration").change(function () {

          var value = $(this).val();
          switch(value) {
            case 'rouge':
              $('#rouge').removeClass('hide').addClass('show');
              $('#jaune').removeClass('show').addClass('hide');
              // Remove & add appropriate class on more options here.  
              break;
            case 'jaune':
              $('#rouge').removeClass('show').addClass('hide');
              $('#jaune').removeClass('hide').addClass('show');
              // Remove & add appropriate class on more options here.  
              break;
            // Add additional cases here. 
          }

        });
      });
    </script>
  </body>
</html>

Note that I would recommend rather than listing several images in the DOM, and toggling their display property on and off…you might instead consider adding a single div to the DOM, and setting its background-image to be the src you want:
http://jsbin.com/pimoy/1/edit
<! DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
      #image {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>

  <body>

    <select id="coloration" name="Coloration">
      <option selected disabled></option>
      <option>rouge</option>
      <option>jaune</option>
      <--!  Add more options here. -- >
    </select>

    <div id="image"></div>

    <script>

      $(function () {

        $("#coloration").change(function () {

          var value = $(this).val();
          switch(value) {
            case 'rouge':
              $('#image').css('background-image', 'url(http://1.bp.blogspot.com/-KOoE7w_4hPE/UZ4W6MZSmzI/AAAAAAAAPHQ/LWx1l4BjMRE/s640/lotsa__red_roses_Wallpaper_wq7bu44.jpg)');
              break;
            case 'jaune':
              $('#image').css('background-image', 'url(http://www.247miami.tv/wp-content/uploads/2013/07/yellow-ballons.jpg)');
              break;
            // Add additional cases here. 
          }

        });
      });
    </script>
  </body>
</html>

