vue实现悬停一段时间改变style

Posted 2021-10-27 天明宝

<div id="demo">
            <div @mouseover="mouseOver" @mouseleave="mouseLeave" :style="active">悬停两秒后改变颜色</div>
</div>

 

<script>
            var demo=new Vue({
                el:\'#demo\',
                data:{
                    active:\'\'
                },
                methods:{
                    mouseOver:function(){
                        timer=setTimeout(()=>{
                            this.active=\'background-color:#aaaaff\';
                        },2000);
                    },
                    mouseLeave:function()
                    {
                        clearTimeout(timer);
                        this.active=\'\';
                    }
                }
            });
        </script>

 

有没有办法用（style =“”）改变悬停时的css？ [复制]

【中文标题】有没有办法用（style =“”）改变悬停时的css？ [复制]

【英文标题】：Is there a way to change css on hover with (style="")? [duplicate]

【发布时间】：2013-07-31 16:16:12

【问题描述】：

我知道您可以导入一个 css 文件，其中包含：

div 
    color: black; 


div:hover 
    color: red;

但是有没有办法在 html 中获得相同的效果？

所以有些东西

<div style="color: black;"></div>

我知道你可以用 js 做到这一点，但我只是想知道它是否有破解方法。而且没有“重复”问题不包含我正在寻找的答案，请记住那是 4几年前。

【问题讨论】：

***.com/questions/1033156/…

***.com/questions/131653/…

那里没有答案...这是 4 年后的事了，现在我们有 html5 和 css3 可能可以了

@OussamaDooby +1 的想法，但稍作研究将有助于不打开另一个重复的问题。

可能有人在外面（这里/那里）有一点技巧......我们都知道css充满了技巧

【参考方案1】：

不允许将伪类用作内联 CSS，因此简短的回答是否定的，您不能做您想要实现的目标。

考虑在文档级别使用<style> 标签，或者如果您愿意，也可以使用 JavaScript..

<a href="#" onmouseover = "this.style.color = '#000'" 
            onmouseout  = "this.style.color = '#f00'">Hi</a>

Demo

正如您所评论的，答案仍然是否定的，即使使用 HTML5/CSS3，您也无法内联使用伪类。

【参考方案2】：

你试过了吗？

<div style=":hover color: red">Testing inline hover</div>

【讨论】：

请写评论

测试内联悬停

@AldiUnanto 我认为他没有评论权

不明白 -1 我指的是第一个答案中提供的链接。这种可能性出现在 W3C w3.org/TR/2002/WD-css-style-attr-20020515 它不适用于浏览器，但它存在

我给出的答案在原始问题中给出了相同的答案，并获得了 7 票赞成。 ***.com/questions/1033156/…在问题中说他知道可以用js完成，并且给出的解决方案是在javascript中......

【参考方案3】：

据我所知，没有办法。但是用js还是可以实现的。

<div
   onmouseover="this.style.color='#ff0000'"
   onmouseout="this.style.color='#000000'">
</div>

【参考方案4】：

<div onmouseover="this.style.color='black'">I wouldn't suggest this</div>