Question

我试图在将鼠标悬停在选择列表中的选项上时显示说明，但是，我无法在悬停时让代码识别。

相关代码：

选择表格块：

<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>

操纵选择（前面定义的数组）：

function rankFeatures(create) {

    var $optionList = $("#optionList");
    var $ranks = $("#ranks");

if(create == true) {
    for(i=0; i<5; i++){
        $optionList.append(features[i]);
    };
}
else {
    var index = $optionList.val();
    $('#optionList option:selected').remove();
    $ranks.append(features[index]);
};

}

这一切都有效。当我试图处理悬停在选项上时，这一切都崩溃了：

$(document).ready( 

function (event) {
$('select').hover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

我在搜索Stack Exchange时发现了这些代码，但是我没有运气让它工作。单击选项时发出警报。如果我不移动鼠标并通过按Enter键关闭警报，它就会消失。如果我用鼠标关闭，则会弹出第二个警告窗口。只是偶尔在选择周围移动鼠标会弹出一个警告框。我已尝试直接定位选项，但在此方面收效甚微。如果我将鼠标悬停在某个选项上，如何才会弹出警报？

感谢阅读！

Answer 1

您可以使用mouseenter事件。

并且您不必使用所有此代码来检查元素是否为option。

只需使用.on()语法委派给select元素。

$(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
        alert('yeah');
        // this refers to the option so you can do this.value if you need..
    });
});

http://jsfiddle.net/AjfE8/

演示

Answer 2

尝试使用鼠标悬停。它为我工作。只有当焦点来自选项列表（如mouseout）时，悬停也会起作用。

function (event) {
$('select').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

Answer 3

你想要的是检测选项元素上的悬停事件，而不是选择：

$(document).ready( 

    function (event) {
    $('#optionList option').hover(function(e) {
        console.log(e.target);
    });
})

Answer 4

你不需要在一个函数中说唱，我永远无法以这种方式工作。拿出来时效果很完美。还使用mouseover，因为离开目标时会运行hover。

$('option').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        console.log('yeah!');
    };
})

小提琴看它有效。将其更改为控制台，这样您就不会收到带有警报的垃圾邮件。 http://jsfiddle.net/HMDqb/

Answer 5

我有同样的问题，但没有一个解决方案有效。

$("select").on('mouseenter','option',function(e) {
  $("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
  $("#show-me").hide();
});

$("option").mouseover(function(e) {
  var $target = $(e.target);
  if($target.is('option')) {
    alert('yeah!');
  };
});

这里是我的jsfiddle https://jsfiddle.net/ajg99wsm/

Answer 6

如果您想放轻松，我建议选择自定义的变体

捕获悬停事件
更改悬停颜色
“下拉”和“所有项目”视图的行为相同

加上您可以拥有的

可调整大小的列表
单选和多选模式之间的单独切换
更多个人css-ing
选项行多行

只需看一下所附的样本。

$(document).ready(function() {
  $('.custopt').addClass('liunsel');


  $(".custopt, .custcont").on("mouseover", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "block")
    } else {
      $(this).addClass("lihover");
    }
  })

  $(".custopt, .custcont").on("mouseout", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "none")
    } else {
      $(this).removeClass("lihover");
    }
  })

  $(".custopt").on("click", function(e) {
    $(".custopt").removeClass("lihover");
    if ($("#btsm").val() == "ssm") {
      //single select mode
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
      $(this).removeClass("liunsel");
      $(this).addClass("lisel");
    } else if ($("#btsm").val() == "msm") {
      //multiple select mode
      if ($(this).is(".lisel")) {
        $(this).addClass("liunsel");
        $(this).removeClass("lisel");
      } else {
        $(this).addClass("lisel");
        $(this).removeClass("liunsel");
      }
    }
    updCustHead();
  });

  $(".custbtn").on("click", function() {
    if ($(this).val() == "ssm") {
      $(this).val("msm");
      $(this).text("switch to single-select mode")
    } else {
      $(this).val("ssm");
      $(this).text("switch to multi-select mode")
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
    }
    updCustHead();
  });

  function updCustHead() {
    if ($("#btsm").val() == "ssm") {
      if ($(".lisel").length <= 0) {
        $("#hrnk").text("current selected option");
      } else {
        $("#hrnk").text($(".lisel").text());
      }
    } else {
      var numopt = +$(".lisel").length,
        allopt =  $(".custopt").length;
      $("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
    }
  }
});

body {
  text-align: center;
}

.lisel {
  background-color: yellow;
}

.liunsel {
  background-color: lightgray;
}

.lihover {
  background-color: coral;
}

.custopt {
  margin: .2em 0 .2em 0;
  padding: .1em .3em .1em .3em;
  text-align: left;
  font-size: .7em;
  border-radius: .4em;
}

.custlist,
.custhead {
  width: 100%;
  text-align: left;
  padding: .1em;
  border: LightSeaGreen solid .2em;
  border-radius: .4em;
  height: 4em;
  overflow-y: auto;
  resize: vertical;
  user-select: none;
}

.custlist {
  display: none;
  cursor: pointer;
}

.custhead {
  resize: none;
  height: 2.2em;
  font-size: .7em;
  padding: .1em .4em .1em .4em;
  margin-bottom: -.2em;
  width: 95%;
}

.custcont {
  width: 7em;
  padding: .5em 1em .6em .5em;
  /* border: blue solid .2em; */
  margin: 1em auto 1em auto;
}

.custbtn {
  font-size: .7em;
  width: 105%;
}

h3 {
  margin: 1em 0 .5em .3em;
  font-weight: bold;
  font-size: 1em;
}

ul {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>
  customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
  <div>
    <button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
  </div>
  <div id="hrnk" class="custhead">
    current selected option
  </div>
  <ul id="ranks" class="custlist">
    <li class="custopt">option one</li>
    <li class="custopt">option two</li>
    <li class="custopt">another third long option</li>
    <li class="custopt">another fourth long option</li>
  </ul>
</div>

将鼠标悬停在选择列表</option>中的<option>上

6 个答案: