Question

我有下拉列表：选择标签，我想显示foreach选项隐藏图像，所以我使用mouseenter事件和mouveleave enevent，它适用于mozila firefox但不适用于谷歌chrome，我使用jquery 1.9.1 这是我的代码：

<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>

Answer 1

~~我可以问你为什么要使用mouseenter和mouseleave个事件进行下拉菜单吗？当下拉选项发生变化时，您确定不希望图像发生变化吗？~~

很遗憾，您无法捕获下拉列表mouseenter元素的mouseleave元素的option和select个事件（类似于您应用大多数CSS的方式）造型给他们）。

您可以将select元素更改为multiple类型：

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>

或者，您可以尝试将样式和行为添加到一组自定义div中，以重新创建您想要的效果（当然，您可能希望根据您的确切偏好设置样式并编写脚本;这是为了演示概念）：

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>

接下来是根据实际下拉选项隐藏/显示图像的代码：

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>

请注意，我建议而不是在DOM中列出几个图像，并打开和关闭它们的display属性...您可以考虑在DOM中添加一个div，并设置其background-image成为你想要的src：

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>

jquery mouseenter和mouseleave with chrome

1 个答案: