Question

我有一个带有一些高级功能的选择选项下拉列表（它保存所有选中的值并将它们显示为顶部的线性列表）。我也有几个图像的div。我正在尝试创建一种效果，当鼠标悬停在列表中的选项时，相应的图像将突出显示（通过添加红色边框）。

这是html中的列表：

   <select  id="a20" multiple="true" tabindex="1" style="text-align:center;">
       <option  value="round">round</option>
   <option value="rectangle">rectangle</option>
   <option value="pear">pear</option>
   </select>

然后是图片：

 <div class="img" style="position:relative; top:-160px; left:350px; width:1200px;">
     <img id="round" class="item" src="images/round.jpg">
     <img id="rectangle" class="item" src="images/joe2.jpg">
     <img id="pear" class="item" src="images/pear.jpg"> 
 </div>

这是我的CSS：

.item{position:relative; float:left;width:80px; height:100px; margin:1px 1px; float:left; align:bottom}

.hover{border:4px solid red;}

我的javascript：

$(document).ready(function() {

var C = $("#a20 option");
C.on('mouseenter', function(){
var V = $(this).val();
$("#V").addClass("hover");})

 C.on('mouseleave', function(){
 var V = $(this).val();
 $("#V").removeClass("hover");})


})

javascipt的灵感来自于这个例子，它起作用：http://jsfiddle.net/WJaVz/21/

为什么它在我的情况下不起作用？ =（

Answer 1

而不是选择这样： $（ “＃V”）选择如下： $（“＃”+ V） jQuery无法在引号中挑选变量。

Answer 2

哈哈，我发现我是完全正确的。我所要做的就是将代码更改为C.mouseenter（function（）.... 我保留了所有的图书馆，并且它正在运作。我仍然有下拉功能的问题。当我在代码中包含函数时，悬停停止工作。

mouseenter on下拉菜单选择选项以突出显示img

2 个答案: