如何使用Knockout.js在鼠标悬停时更改CSS类？

ssm49v7z 于 2022-11-10 发布在其他

关注(0)|答案(2)|浏览(170)

我有一个由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)实现所需突出显示功能的更简单的方法是什么？

knockout.js

来源：https://stackoverflow.com/questions/28262401/how-to-use-knockout-js-to-change-a-css-class-on-mouseover

2条答案

按热度按时间

pxq42qpu1#

Knockout的目的是通过 * 绑定处理程序 *，以声明方式将视图（HTML）连接（绑定）到视图模型（JavaScript对象）。然而，并不是每个可能的DOM到视图模型的交互都有预定义的绑定处理程序。
在您的特定情况下（更改样式），您可以简单地使用:hover CSS伪类。您的视图将响应鼠标移动，但您的视图模型将不会注意到任何移动。
如果你想改变一个不同的DOM属性来响应鼠标的移动，比如一个元素的文本，CSS就不能再用了。你可以“手动”使用knockout的event绑定--或者你可以创建一个自定义的绑定处理程序来设置视图模型的一个属性来响应 mouseenter 和 mouseleave 事件。
自定义绑定处理程序的优点是，您现在有了一个实际的可观察对象，可以将其作为其他行为的基础，并且在视图中键入的内容更少，这在多次使用它时是很好的。
下面的代码在悬停时更改元素的文本和CSS类：
第一个

赞(0）回复(0）举报 2022-11-10

vql8enpb2#

为什么不保持简单。使用css :hover

//add a hover effect to class .black
.black{ 
border: solid 5px black
} .black:hover { 
border: solid 5px green;
}

jsfiddle：http://jsfiddle.net/nmx2og9g/1/的参数值

赞(0）回复(0）举报 2022-11-10

我来回答

如何使用Knockout.js在鼠标悬停时更改CSS类？

2条答案

相关问题

热门标签

最新问答