小编Jam*_*ill的帖子

我有一个由Knockout.js foreach数据绑定填充的图像网格.默认情况下,网格中的每个图像都有一个由背景颜色设置的黑色轮廓.当用户将鼠标悬停在每个图像上时,我希望该轮廓变为白色以表示它已被突出显示.

目前,我正在使用两个事件处理程序,一个用于mouseenter,一个用于mouseleave.
第一个将图像的CSS类更改为具有白色背景的类.后者将其改回黑色.但是,当鼠标进入图像时,两者都被调用(通过调试确认),因此不会看到任何变化.

的HTML如下:(注:每个图像具有fileName表示图像文件的位置属性有两种.CSS类调用black和white,一个用于每个高亮状态.)

<div id="palette-container" data-bind="foreach: images" style="display: inline-block">
    <div style="float: left">
        <img class="black" data-bind="attr: { id: fileName, src: $parent.imagePath(fileName) }, 
                                      event: { mouseenter: $parent.toWhite(fileName), mouseleave: $parent.toBlack(fileName) }, 
                                      style: { width: $parent.size, height: $parent.size }">
    </div>
</div>

正如你所看到的,我现在不是以非常优雅的方式做这件事.我将每个元素绑定id到其唯一的fileName属性.然后我将fileName传递给事件处理程序,以便id可以访问该元素以更改CSS类.

(A)为什么都mouseenter和mouseleave被当鼠标进入的图像称为？

(B)实现所需突出显示功能的简单方法是什么？