UL 上的 KnockoutJS 悬停不会触发，适用于 CSS：悬停？

Question

所以我有一个我正在开发的地理藏宝网站的组织系统，但由于某种原因，我终生无法在这个 UL 上触发鼠标悬停。

<ul data-bind="foreach: markers, event { onmouseover: highlightLocation }" class="locationList">
    <h3 class="resultTITLE"> <span data-bind="text: title"></span></h3>
    <p class="resultLATLONG">LAT <span data-bind="text: lat"></span>, LONG <span data-bind="text: lng"></span></p>
</ul>

如果我做一个简单的 CSS :hover pseudo UL 样式会改变，但如果我尝试通过 KnockoutJS 使用它，我无法触发任何东西。作为删除其他代码的参考，我的 viewModel 如下所示：

var viewModel = {
   //other code inbetween, linted

   highlightLocation : function() {
      console.log("hovering!");
   },
};

ko.applyBindings(viewModel);

过去几个小时我一直在盯着它看，我觉得我错过了一些简单的东西，它正盯着我错过的脸。有什么想法吗？

Answer 1

对淘汰赛不太熟悉，但注意到一些事情并让它发挥作用。

event 后面缺少一个冒号，而事件实际上称为 mouseover，而不是 onmouseover。

var viewModel = {
  title: "title",
  lat: 5,
  lng: 5,
  highlightLocation: function() {
    console.log("hovering!");
  },
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="event: { mouseover: highlightLocation }" class="locationList">
  <h3 class="resultTITLE"> <span data-bind="text: title"></span></h3>
  <p class="resultLATLONG">LAT <span data-bind="text: lat"></span>, LONG <span data-bind="text: lng"></span></p>
</ul>

(fiddle)