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

Posted 2023-02-22

【中文标题】如何在特定卡片上制作悬停效果并停止在剩余卡片上悬停？

【英文标题】：How to make a hover effect on a particular card and stops hovering on remaining cards?

【发布时间】：2021-08-31 22:49:39

【问题描述】：

如果我将鼠标悬停在一张卡片上，它会显示每张卡片的图标，但我想在特定的悬停卡片上显示图标（我卡片的输出-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>

【参考方案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,
      )
    
  

【参考方案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>

【参考方案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>