Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

Question

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

When hovering over a card, all icons are displayed instead of just the icons for that specific card. I want to show only the icons for the card being hovered on (example output: image). The cards are generated automatically using v-for and fetching data from the axios package. The responsibility of DisplayNotes.vue file is to display notes in the cards to the user. Can someone help me resolve this issue?

[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>

javascript html css vue.js sass

Answer 1

Answer №1

All the elements are conditionally displayed based on the same hover property. Therefore, when this property is true (i.e., when an element is hovered over), all elements are shown instead of just the one being hovered on.

To solve this issue, one solution is to include a hover property in each element of the notes[] array and use it for conditional rendering:

<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
        },
      ],
    }
  },
}

To ensure that new elements added to the notes[] array in handlesubmit() also have the hover property:

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

Answer 2

All the elements are conditionally displayed based on the same hover property. Therefore, when this property is true (i.e., when an element is hovered over), all elements are shown instead of just the one being hovered on.

To solve this issue, one solution is to include a hover property in each element of the notes[] array and use it for conditional rendering:

<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
        },
      ],
    }
  },
}

To ensure that new elements added to the notes[] array in handlesubmit() also have the hover property:

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

Answer 3

Answer №2

Your approach involves adding a 'hover' property to each card and then manipulating it within event handlers.

<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>

Answer 4

Your approach involves adding a 'hover' property to each card and then manipulating it within event handlers.

<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>

Answer 5

Answer №3

To achieve this effect, CSS alone can be used without the need for JavaScript.

Simply assign a note class to the note container and a note-icons class to the icons element.

Then, by incorporating some straightforward CSS rules, the visibility of note-icons can be toggled on hover.

.note-icons {
  visibility: hidden;
}

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

Complete Snippet

<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 6

To achieve this effect, CSS alone can be used without the need for JavaScript.

Simply assign a note class to the note container and a note-icons class to the icons element.

Then, by incorporating some straightforward CSS rules, the visibility of note-icons can be toggled on hover.

.note-icons {
  visibility: hidden;
}

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

Complete Snippet

<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>

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

Answer №1

Answer №2

Answer №3

Similar questions

The Best Way to Calculate a Total Sum with Comma-Separated Values in AngularJS

Fetching elements using Python Selenium with JavaScript

Encountering vuex error when attempting to send data to Django backend

What is the best way to set up a task scheduler using node-cron in a Vue.js

Conflict arising from duplicated directive names in AngularJS

Create dynamic combo boxes using jQuery

AngularJS - Determine the correct condition or make a choice from the available options

What is the method for styling the third list item in a CSS hierarchy?

Having trouble getting XSLT to work properly with the XML file

Switch the URL to render the view using Express 4

The NW JS window loaded event fails to trigger when loading a URL, but functions properly when loading from a local

What is the reason for encountering an error when attempting to use a let variable in a new block before reassigning it

Send data using only Javascript

Revolutionize Your App with React Native's Interactive Bottom Sheet Option

Interactive Geography Selector

Is there a way to invoke a function within an Angular Service from within the same service itself?

What causes the Footer to appear as a floating element in Tailwind CSS?

How can I display and utilize the selected value from a Rails select form before submitting it?

Organize your file dependencies efficiently using NPM

Service for Posting in Angular