I dynamically bound a style to div, that is, using the calculation property to display the background picture by default, and then changing the picture when hover finds that the picture cannot be changed when the mouse is moved up, but the other properties take effect
< div class= "item": style= "topVal (0)" ref= "item1" >
<router-link :to="{name: "qa"}" tag="p">aaaa</router-link>< / div >
display the default background picture using the calculation property topVal
computed: {
topVal(idx) {
return idx => {
return {
top: `${ idx * 103 }px`,
background: `url(${require("../../assets/images/homepage/bg.jpg")})0 -${idx*103}px no-repeat / cover`
}
}
}
}, then use css to change pictures with hover
&: nth-child (2) {
&:hover {
transform: rotate(360deg);//
background: url(../../assets/images/homepage/blueBg.jpg)0 -103px no-repeat / cover;//
p {//
color: -sharpfff;
}}
hover can"t change pictures if I bind a mouseenter event to div and use native js to set backgound, I can change pictures. Why