我有下拉列表：选择标签，我想显示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>
答案 0 :(得分：0)
我可以问你为什么要使用 mouseenter和mouseleave个事件进行下拉菜单吗？当下拉选项发生变化时，您确定不希望图像发生变化吗？
很遗憾，您无法捕获下拉列表mouseenter元素的mouseleave元素的option和select个事件（类似于您应用大多数CSS的方式）造型给他们）。
您可以将select元素更改为multiple类型：
<!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中，以重新创建您想要的效果（当然，您可能希望根据您的确切偏好设置样式并编写脚本;这是为了演示概念）：
<!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：
<!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>