Question

好的，我的两个div都具有鼠标悬停功能，它们具有相同的功能。现在的问题是，如果我将鼠标悬停在其中之一上，那么两者都会发光。如何解决呢？因此，当我将它们悬停时，它们会一一闪耀。

DIVS：

 <div class="latestItemBody" @mouseover="shineItemIcon"
@mouseout="shineOff" :style="{background: activeCardBg}">

<div class="latestItemBody" @mouseover="shineItemIcon"
@mouseout="shineOff" :style="{background: activeCardBg}">

功能：

methods: {
    shineItemIcon() {
        this.activeCardBg = '#7a00ff';
        this.bounce = 'animated bounceIn';
    },
    shineOff() {
        this.activeCardBg = '';
        this.bounce = '';
    }

Answer 1

将div id作为参数传递给shineitemicon和shineoff函数。根据条件设置“ activeCardBg”值。将activecardBg1分配给第一个div，将activeCardBg2分配给第二个div。

Answer 2

它们都“发光”的原因是因为您将activeCardBg绑定到两个上，从而改变了背景。

您可以像这样用纯CSS添加发光效果。

// CSS
.latestItemBody:hover {
    background-color: #7a00ff
}

如果您想使用JS做到这一点，可以这样做。

 // Template
 <div 
   class="latestItemBody" 
   @mouseover="shineItemIcon"
   @mouseout="shineOff">
 </div>

 <div 
   class="latestItemBody" 
   @mouseover="shineItemIcon"
   @mouseout="shineOff">
 </div>

 // Methods
 shineItemIcon(e) {
    e.target.style.backgroundColor = '#7a00ff';
    this.bounce = 'animated bounceIn';
 },
 shineOff(e) {
    e.target.style.backgroundColor = '';
    this.bounce = '';
 }

多个div上的Vuejs相同功能需要分别运行

2 个答案: