21avalon - 指令ms-hover(hover绑定)

简介: 21avalon - 指令ms-hover(hover绑定)

用于类实现:hover伪类的效果, 当用户鼠标移动元素上方时添加几个类名, 鼠标移走时将刚才的 类名移除

用法类似于类名绑定

<body ms-controller="test">
    <script>
        avalon.define({
            $id: 'test',
            aaa: "aaa bbb ccc",
            bbb: 'ddd',
            ccc: ['xxx', 'yyy', 'zzz'],
            ddd: 'eee',
            toggle: true,
            toggle2: false
        })
    </script>
    <span :hover="@aaa">直接引用字符串</span>
    <span :hover="@ccc">直接引用数组</span>
    <span :hover="[@aaa, @bbb,'kkk']">使用对象字面量</span>
    <span :hover="['aaa', 'bbb',(@toggle? 'ccc':'ddd')]">选择性添加类名</span>
    <span :hover="[@toggle && 'aaa']">选择性添加类名</span>
    <span :hover="[ @ddd + 4]">动态生成类名</span>
</body>
目录
相关文章
|
6月前
dragonBones slot切换display的一个bug
dragonBones slot切换display的一个bug
34 0
15avalon - 指令ms-important(important绑定)
15avalon - 指令ms-important(important绑定)
54 1
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
69 1
|
前端开发
17avalon - 指令ms-css(样式绑定)
17avalon - 指令ms-css(样式绑定)
58 0
|
前端开发 JavaScript
34avalon - 指令ms-effect(动画绑定)
34avalon - 指令ms-effect(动画绑定)
41 0
20avalon - 指令ms-active(active绑定)
20avalon - 指令ms-active(active绑定)
45 0
|
前端开发
CSS pointer-events 控制鼠标事件
CSS pointer-events 控制鼠标事件
46 0
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
179 0
|
前端开发
26avalon - 指令ms-duplex(各表单元素用法)
26avalon - 指令ms-duplex(各表单元素用法)
48 1
25avalon - 指令ms-on*(事件绑定)
25avalon - 指令ms-on*(事件绑定)
54 1