Display a particular element when hovered over

Question

Display a particular element when hovered over

Is there a way to make only individual elements pop up on hover instead of all of them at once?

items: [{
    item: "Book",
    info: "Lorem ipsum",
    displayInfo: false
  },
  {
    item: "Pen",
    info: "Lorem ipsum",
    displayInfo: false
  },
  {
    item: "Paper",
    info: "Lorem ipsum",
    displayInfo: false
  }
]

<ul>
  <li v-for="(item,index) in items" v-bind:key="index" @mouseover="item.displayInfo=true;" @mouseleave="item.displayInfo=false">{{item.item}}
    <p v-if="item.displayInfo">{{item.info}}</p>
  </li>
</ul>

javascript vue.js

Answer 1

Answer №1

It seems like your code is correct after all. By adjusting the deleteNote property of the elements, we can observe if it functions more accurately. This approach ensures that only the note of the currently hovered element is displayed:

new Vue({
  el: '#app',
  data: {
    lists: [{
        fruit: "Apple",
        note: "aa",
        deleteNote: false
      },
      {
        fruit: "Pear",
        note: "pp",
        deleteNote: false
      },
      {
        fruit: "Eggs",
        note: "gg",
        deleteNote: false
      }
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(list,index) in lists" v-bind:key="index" @mouseover="list.deleteNote=true;" @mouseleave="list.deleteNote =false">{{list.fruit}}
      <p v-if="list.deleteNote">{{list.note}}</p>
    </li>
  </ul>
</div>

Answer 2

It seems like your code is correct after all. By adjusting the deleteNote property of the elements, we can observe if it functions more accurately. This approach ensures that only the note of the currently hovered element is displayed:

new Vue({
  el: '#app',
  data: {
    lists: [{
        fruit: "Apple",
        note: "aa",
        deleteNote: false
      },
      {
        fruit: "Pear",
        note: "pp",
        deleteNote: false
      },
      {
        fruit: "Eggs",
        note: "gg",
        deleteNote: false
      }
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(list,index) in lists" v-bind:key="index" @mouseover="list.deleteNote=true;" @mouseleave="list.deleteNote =false">{{list.fruit}}
      <p v-if="list.deleteNote">{{list.note}}</p>
    </li>
  </ul>
</div>

Answer 3

Answer №2

Each delete button is connected to a single flag for deletion.

You can implement it like this:

<ul>
 <li v-for="(list,index) in lists" v-bind:key="index" @mouseover="list.deleteNote=index;" @mouseleave="list.deleteNote = -1">{{list.fruit}}
  <p v-if="list.deleteNote === index">{{list.note}}</p>
 </li>
</ul>

On hover, the current index is assigned to deleteNote, and on mouseout, an invalid index (-1) is assigned. This way, each delete button corresponds to its respective index.

Answer 4

Each delete button is connected to a single flag for deletion.

You can implement it like this:

<ul>
 <li v-for="(list,index) in lists" v-bind:key="index" @mouseover="list.deleteNote=index;" @mouseleave="list.deleteNote = -1">{{list.fruit}}
  <p v-if="list.deleteNote === index">{{list.note}}</p>
 </li>
</ul>

On hover, the current index is assigned to deleteNote, and on mouseout, an invalid index (-1) is assigned. This way, each delete button corresponds to its respective index.

Answer 5

Answer №3

It seems like the codesandbox feature on StackOverflow does not support vue.js, so I made some adjustments to the JavaScript in the following fiddle. According to the Vue list rendering documentation, the entire list needs to be wrapped as a variable.

You can check out my fiddle with your code and the expected result here: https://jsfiddle.net/gve4s87L/

Answer 6

It seems like the codesandbox feature on StackOverflow does not support vue.js, so I made some adjustments to the JavaScript in the following fiddle. According to the Vue list rendering documentation, the entire list needs to be wrapped as a variable.

You can check out my fiddle with your code and the expected result here: https://jsfiddle.net/gve4s87L/

Display a particular element when hovered over

Answer №1

Answer №2

Answer №3

Similar questions

I'm attempting to utilize a basic webcam capture upload feature, but it seems that the upload function is not functioning properly

The tooltipShowDelay setting within AG Grid does not seem to be functioning as expected

What are the steps to effectively populate a mongoose schema?

Managing options post initialization in egjs-flicking: A comprehensive guide

The hydration error in next js is causing this code to malfunction

Error: Attempting to assign value to the 'innerHTML' property of null in a Wordle clone with local storage

What is causing the check box in the simple_form view to consistently return a value of 1 when checked or unchecked in rails 3.2?

Currently in the process of transitioning to vue3 with <script setup>, encountering issues with the functionality of computed

Clicking on the modal button causes the code to run multiple times in JQuery and JavaScript

Ways to implement StackNavigator along with Redux?

Monitor $localStorage for any modifications

Having trouble extracting a JSON object from a POST request in Express v4 with the help of body-parser?

Error encountered in Node/Express application: EJS partials used with Angular, causing Uncaught ReferenceError: angular is not defined

Implement AJAX and PHP to submit form data along with the page ID and session information

Creating an object efficiently by defining a pattern

Obtaining the pathname in a NextJS file like _document.js is a matter of accessing

Is there a reason for the absence of the Revit category attribute in the JSON response retrieved from the GET request :urn/metadata/:guid/

Express framework in NodeJS encounters an undefined header error

What is the best way to create a non-reactive value in Vue.js?

What are some ways to prevent screen flickering when combining Vue with Rails?