Knockout.js在mouseover上制作大文本

时间:2014-05-20 18:18:51

标签: jquery asp.net .net knockout.js

Here's my Code
我需要在鼠标悬停事件中使这些文本变粗/大并在鼠标输出时恢复正常。无法弄清楚如何在暴露互联网后如何做到这一点并且找不到关于将组与切换事件集成的事情。

我想说明我是淘汰赛的新手,所以对代码的一点解释会非常感激。

<div class="container">
<ul data-bind="foreach: List" style="text-align: center;" dir="rtl">
<li class="checkbox">
    <label>
        <input type="checkbox" name="SelectedGroups" data-bind="attr: { value: Id }, checked: $root.Selected" />
        <span data-bind="text: Value"></span>
    </label>
</li>
</ul>
<br/></br>

<p dir="rtl" style="text-align: center" >מספר המועמדים שנבחרו: <label data-bind="text:  Selected().length"></label></p>
</div>

脚本

 var viewModel = {
List: ko.observableArray([ { Id: 1, Value: "מועמד ראשון" }, 
                           { Id: 2, Value: "מועמד שני" }, 
                           { Id: 3, Value: "מועמד שלישי" },
                          { Id: 4, Value: "מועמד רביעי" },
                          { Id: 5, Value: "מועמד חמישי" },
                          { Id: 6, Value: "מועמד שישי" }
                          ]),
   Selected: ko.observableArray(/*[" פה ניתן להוסיף מועמדים שנבחרו קודם לכן עם ',' בינהם*"]*/)
};

viewModel.SelectedLength = ko.computed(function() { return viewModel.Selected().length;     });

viewModel.onPush = function() {
viewModel.Selected.push();
};

viewModel.onPop = function() {
viewModel.Selected.pop();
};

ko.applyBindings(viewModel);

css课程我想在文本上切换:

.field-onmouseover {
font-weight: bold;
font-size: xx-large;
cursor: pointer; cursor: hand; 
}

1 个答案:

答案 0 :(得分:3)

您可以编辑css并添加伪类悬停

.checkbox span[data-bind]:hover{
    font-weight: bold;
    font-size: xx-large;
    cursor: pointer; cursor: hand; 
}

但是如果你想专门添加一个事件,请查看http://knockoutjs.com/documentation/event-binding.html