如何在特定卡片上制作悬停效果并停止在剩余卡片上悬停？

Question

如果我将鼠标悬停在一张卡片上，它会显示每张卡片的图标，但我想在特定的悬停卡片上显示图标（我卡片的输出-image）。这些卡片是通过使用 v-for 和从 axios 包中获取数据，DisplayNotes.vue 文件的职责是向用户显示卡片中的笔记，请帮我解决这个问题。`

[DisplayNotes.vue]

<template>
<div class="main-section">
    <div v-for="note in notes" :key="note.data" class="container">
        <div class="card-content">
            <h5>{{note.title}}</h5>
            <p><i>{{note.body}}</i></p>
        </div>
        <div @mouseover="hover=true" @mouseleave="hover=false" class="import-icons">
            <icons v-if="hover" />
            <button type="button" @click="handlesubmit()">close</button>
        </div>
    </div>
</div>
</template>
<script>
import service from '../service/User'
import icons from './icons'
export default {
    components: {
        icons
    },
    data() {
        return {
            hover: false,
            notes: [{
                id: 1,
                title: 'Fundoo',
                body: 'unlimited Notes...'
            }, ],
        }
    },
    methods: {
        async handlesubmit() {
           const response = await axios.get('/displayNotes', {});
            localStorage.getItem('token', response.data.token);
           this.notes.push(response.data);
        },
    }
}
</script>
<style lang="scss">

.card-content {
    input {
        border: none;
    }
    textarea {
        border: none;
        outline: none;
    }
}
/* dividing the width percentage */
.container {
    height: 200px;
    width: 25%;
    float:left;
    margin: -2.98%; 
    margin-left:20%;
    margin-top: 5%;
    border-style: ridge;
}
.import-icons {
    display: block;
    margin-left: -2%;
    padding-top: 25%;

    button {
        border: none;
        background: none;
        float: right;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: -2%;
        padding-left: 400px;
    }
}

</style>

[icons.vue]

<template>
<div class="used-icons">
    <i id="first-icon" class="fas fa-bell"></i>
    <i id="second-icon" class="fas fa-user"></i>
    <i id="third-icon" class="fas fa-palette"></i>
    <i id="forth-icon" class="fas fa-archive"></i>
    <!-- <i id="fifth-icon" class="fas fa-ellipsis-v"></i> -->
</div>
</template>

<style scoped>
#first-icon {
    opacity: 0.9;
}

#second-icon {
    padding-left: 30px;
    padding-right: 30px;
    opacity: 0.9;
}

#third-icon {
    opacity: 0.9;
}

#forth-icon {
    padding-left: 30px;
    padding-right: 30px;
    opacity: 0.9;
}

#fifth-icon {
    padding-right: 195px;
    opacity: 0.9;
}
</style>

Answer 1

所有项目都有条件地呈现在同一个hover 属性上，因此只要该属性为真（当项目悬停时），所有项目都会显示，而不仅仅是悬停的项目。

解决此问题的一种方法是将hover 添加到每个notes[] 数组元素，并使用它来有条件地渲染它们：

<div v-for="note in notes">
  <div @mouseover="note.hover=true" @mouseleave="note.hover=false">
    <icons v-if="note.hover" />
  </div>
</div>

export default {
  data() {
    return {
      // hover: false, // remove this
      notes: [
        {
          id: 1,
          title: 'Fundoo',
          body: 'unlimited Notes...',
          hover: false, // add this
        },
        {
          id: 2,
          title: 'Fundoo',
          body: 'unlimited Notes...'
          hover: false, // add this
        },
      ],
    }
  },
}

将hover 属性添加到handlesubmit() 中的新notes[] 数组元素：

export default {
  methods: {
    async handlesubmit() {
      //...
      this.notes.push({
        ...response.data,
        hover: false,
      })
    }
  }
}

Answer 2

您只需要 CSS 就可以做到这一点，不需要 JavaScript。

将note 类添加到笔记容器，将note-icons 添加到图标元素。

然后通过一些简单的 css 我们可以有条件地在悬停时显示note-icons。

.note-icons {
  visibility: hidden;
}

.note:hover .note-icons
  visibility: visible;
}

完整片段

<template>
<div class="main-section">
    <div v-for="note in notes" :key="note.data" class="container note"> <!-- ⭐️ -->
        <div class="card-content">
            <h5>{{note.title}}</h5>
            <p><i>{{note.body}}</i></p>
        </div>
        <div class="import-icons">
            <icons class="note-icons"/> <!-- ⭐️ -->
            <button type="button" @click="handlesubmit()">close</button>
        </div>
    </div>
</div>
</template>
<script>
import service from '../service/User'
import icons from './icons'
export default {
    components: {
        icons
    },
    data() {
        return {
            hover: false,
            notes: [{
                id: 1,
                title: 'Fundoo',
                body: 'unlimited Notes...'
            }, ],
        }
    },
    methods: {
        async handlesubmit() {
           const response = await axios.get('/displayNotes', {});
            localStorage.getItem('token', response.data.token);
           this.notes.push(response.data);
        },
    }
}
</script>
<style lang="scss">

.card-content {
    input {
        border: none;
    }
    textarea {
        border: none;
        outline: none;
    }
}
/* dividing the width percentage */
.container {
    height: 200px;
    width: 25%;
    float:left;
    margin: -2.98%; 
    margin-left:20%;
    margin-top: 5%;
    border-style: ridge;
}
.import-icons {
    display: block;
    margin-left: -2%;
    padding-top: 25%;

    button {
        border: none;
        background: none;
        float: right;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: -2%;
        padding-left: 400px;
    }
}

.note-icons { /* ⭐️ */
  visibility: hidden;
}

.note:hover .note-icons { /* ⭐️ */
  visibility: visible;
}
</style>

Answer 3

根据您的实现，我认为您将“悬停”属性添加到每张卡片，然后在事件处理程序中对其进行操作。

<template>
  <div class="main-section">
    <div v-for="(note, index) in notes" :key="note.data" class="container">
        <div class="card-content">
            <h5>{{note.title}}</h5>
            <p><i>{{note.body}}</i></p>
        </div>
        <div @mouseover="note[index].hover=true" @mouseleave="note[index].hover = false" class="import-icons">
            <icons v-if="hover" />
            <button type="button" @click="handlesubmit()">close</button>
        </div>
    </div>
  </div>
</template>
<script>

export default {
    data() {
        return {
            hover: false,
            notes: [{
                id: 1,
                title: 'Fundoo',
                body: 'unlimited Notes...',
                hover: false
            }, ],
        }
    },
    methods: {
        async handlesubmit() {
           const response = await axios.get('/displayNotes', {});
            localStorage.getItem('token', response.data.token);
           this.notes.push(response.data);
        },
    }
}
</script>