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>
目录
相关文章
|
8月前
15avalon - 指令ms-important(important绑定)
15avalon - 指令ms-important(important绑定)
34 1
|
8月前
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
41 1
|
8月前
|
前端开发
17avalon - 指令ms-css(样式绑定)
17avalon - 指令ms-css(样式绑定)
29 0
|
8月前
|
前端开发 JavaScript
34avalon - 指令ms-effect(动画绑定)
34avalon - 指令ms-effect(动画绑定)
28 0
|
9月前
|
前端开发
CSS pointer-events 控制鼠标事件
CSS pointer-events 控制鼠标事件
33 0
|
8月前
|
前端开发
26avalon - 指令ms-duplex(各表单元素用法)
26avalon - 指令ms-duplex(各表单元素用法)
32 1
|
8月前
25avalon - 指令ms-on*(事件绑定)
25avalon - 指令ms-on*(事件绑定)
37 1
|
8月前
23avalon - 指令ms-visible(可见性绑定)
23avalon - 指令ms-visible(可见性绑定)
23 0
|
8月前
|
JavaScript
22avalon - 指令ms-if(if绑定)
22avalon - 指令ms-if(if绑定)
22 0
|
10月前
|
前端开发 小程序
UniApp 解决 style 绑定 css 变量,支持 var() 使用
UniApp 解决 style 绑定 css 变量,支持 var() 使用
1670 0