鍍金池/ 問答/HTML/ render函數(shù)如何設(shè)置hover時的樣式？

render函數(shù)如何設(shè)置hover時的樣式？

render函數(shù)生成的元素，如何設(shè)置在鼠標(biāo)hover在該元素時，改變元素字體顏色。如下圖，如何做到鼠標(biāo)hover在“上架”時，改變“上架”字體顏色？
偽類樣式一般都是在class樣式上設(shè)置的，但是render函數(shù)上不知怎么設(shè)置class樣式。望指教。
圖片描述

代碼如下：

{
            title: '操作',
            key: ' ',
            width:160,
            align: 'center',
            render:(h, parmas) => {
                return ('div', [
                    h('Button', {
                        props:{icon:'search'},
                        style:{backgroundColor:'transparent',border:'none',fontSize:'21px',margin:'0 10px 6px 0'},
                        on:{click:()=>{ console.log('fff')}}
                    }),
                    h('Poptip', {
                        props:{
                            trigger:'hover',
                            placement:'bottom'
                        }
                    }, [
                        h('Icon', {props:{type:'gear-b',size:20}}),
                        h('Icon', {props:{type:'ios-arrow-down'},style:{marginLeft:'4px'}}),
                        h('div',  {slot:'content'},[

                            h('p', {
                                style:{padding:'8px',cursor:'pointer'},
                                on:{click:()=>{ console.log('aaa')}}
                            }, '上架'),
                            h('p', {
                                style:{padding:'8px',cursor:'pointer'},
                                on:{click:()=>{ console.log('bbb')}}
                            }, '刪除')
                        ])
                    ])
                ])
            }
          }




嘗試過加class屬性，如下圖，F(xiàn)12能看到加上的類名“mouse-on”，但是沒有樣式?jīng)]出來。

clipboard.png

回答
編輯回答
掛念你

你對象知道加 style 屬性,咋可能不會加 class ? 官方例子這兩個是在一起的啊。class 屬性跟 style 屬于同級不要放在 attr 里面用。對象屬性

1 字符串模式

圖片描述

2 對象模式

圖片描述

2018年2月13日 22:00
編輯回答
遺莣

才發(fā)現(xiàn)樓主原來寫了答案了，仔細看了一下才發(fā)現(xiàn)....

2017年7月8日 22:44
編輯回答
柒喵

樓主，解決了嗎，同樣的問題，添加類沒反應(yīng)

2018年6月1日 18:27
編輯回答
毀憶

給render出來的對象寫上class試試。

2017年12月25日 23:53
編輯回答
夕顏
 h('p', {
            //class:{"mouse-on"}
            //attrs:{class:"mouse-on"}
            style:{padding:'8px',cursor:'pointer'},
            on:{click:()=>{ console.log('aaa')}}

  }, '上架')

上面的注釋的兩種寫法都是正確的，但是style的不能有作用域scope

2017年6月24日 04:23