jQuery的mousenter和mouseleave與鉻

我有下拉列表：選擇標記，我想顯示foreach選項隱藏的圖像，所以我用mouseenter事件和mouveleave enevent，它適用於mozila firefox罰款，但不適用於谷歌鉻，我使用jQuery的1.9.1 這是我的代碼：jQuery的mousenter和mouseleave與鉻

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

來源

2014-07-01 Houssem Arfaoui

不綁定在循環中的事件。 – BBekyarov

~~我可以問你爲什麼使用 mouseenter和 mouseleave事件下拉菜單？您確定在下拉選擇更改時不希望圖片發生變化嗎？~~

不幸的是，你不能捕獲下拉select元素的option元素mouseenter和mouseleave事件（類似於如何你不能最CSS樣式應用到它們）。另外

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會重現：

你可以，而是改變你的select元素是multiple類型您想要的效果（當然，您希望將這些效果進一步設置爲您的確切偏好;這是爲了演示概念）：

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屬性開啓和關閉......你可能會考慮添加一個div到DOM，並將其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>

來源

2014-07-01 06:07:47 jtheletter

感謝janaspage，但我不想改變選擇選項的形象，我想通過把光標放在選項，爲什麼我使用了mouseenter和鼠標離開時，你有沒有其他suggetion –

感謝您的澄清（和不downvoting改變形象！）。我相應地更新了我的答案。最好的祝福。 – jtheletter

謝謝你janaspage這個解決方案 –

jQuery的mousenter和mouseleave與鉻

回答

相關問題