Mouseover function not triggering until clicked on in Google Chrome

I'm attempting to execute a function when the cursor hovers over a list item as shown below:

<div id="vue-app">
    <ul>
        <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li>
    </ul>
</div>

new Vue({
    el: '#vue-app',
    data: {
        items: ['meat', 'fruits', 'vegetables'],
    },
    methods: {
        removeItem(value) {
            ...
        }
    },
});

however, the mouseover event only triggers when I click on the list item. What am I missing here?

MouseOver

https://i.sstatic.net/ONdJp.png

MouseClicked

https://i.sstatic.net/pXzkP.png

Answer №1

Take a look at this functioning code snippet

new Vue({
    el:'#vue-app',
    data:{
        items:['meat','fruits','vegetables'],
    },
    methods:{
        removeItem(value){
          console.log(value);
        }
    },
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.js"></script>
<div id="vue-app">
        <ul>
            <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li>
        </ul>
</div>

Answer №2

I encountered an issue where the device toolbar was activated, causing a touch emulation status bar to appear at the top of my page and transforming my cursor into a grey circle. As a result, mouse events were not being triggered unless I physically clicked on the screen.

To resolve this issue, consider disabling the device toolbar in the developer tools. If you are using a Mac, ensure that the developer tools window is open and then either press cmd + shift + m or click on the icon located between the select element icon and the Elements menu item.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm attempting to store this HTML code in local storage in order to utilize it on a new cart page, but I keep encountering an error

Here is the HTML snippet: <div class="cofefe"> <img src="photos/Shop%20-%20French%2Roast.png"> <p>Somecoffee</p> <p>15</p> <p>French ...

Looping through a sequence of asynchronous tasks, utilizing the async/await syntax, writing data to

I'm currently working on a script to download pdf files from a specified URL and save them to my local disk. However, I have encountered an issue where I need each file to be downloaded one at a time with a one-second delay in between (to ensure that ...

Tips on retrieving specific information from PHP through jQuery AJAX

I have encountered an issue with my JavaScript file where I am sending an array of data to my PHP file. The problem is, when trying to print the name in #NAME and password in #PASSWORD, both values end up in both fields. You can see how it currently displa ...

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

"Utilizing JQuery's addClass, removeClass, and appendTo functions to

Having a bit of an issue trying to implement a functionality where options inside a div can be clicked and moved to another div, and if they are clicked again in the other div, they will return back. Here is the code snippet: $(".selectable").bind(&ap ...

There was an issue locating a declaration file for the module 'clarifai'

https://i.stack.imgur.com/PgfqO.jpg I recently encountered a problem after installing the Clarifai API for a face recognition project. Despite my efforts, I have been unable to find a solution. When I hover over "import clarifai," I receive the message: ...

Exploring the possibility of designing custom pageload tooltips inspired by jQuery validationEngine's visual style and interface

My website incorporates the jQuery.validationEngine plugin to ensure the accuracy of user input. The tooltips that accompany this validation feature are particularly appealing; they gracefully fade in and vanish when users interact with them. To visualize ...

Efficiently loading an image in one go

Rendering approximately 3000 records, each row displays: Customer Profile Edit Customer Name, Action 1 John Edit image | Delete image 2 John Edit image | Delete image 3 John Edit image | Delete image 4 John ...

Customizing the appearance of columns in an antd table

Below is the table column configuration I am working with, where notes are rendered using a custom function: fieldDefs: (results, isJsonData) => [ { title: 'Notes', name: 'notesHTML', table: { render: SectionNotes, sear ...

Exploring the integration of Bootstrap Confirmation into an ASP.NET web page

I'm currently working on implementing Bootstrap Confirmation (http://ethaizone.github.io/Bootstrap-Confirmation/#top) on an ASP.NET web page using C#, but I've encountered some issues. Master Page References <asp:ScriptReference Path="Script ...

Tips for monitoring a field within an angularJS factory

Within my web application, I am utilizing a factory. This factory contains an object named mapLayers. Within my controller, I am assigning this factory.mapLayers object to a variable on the scope called $scope.mapLayers and using ngRepeat to iterate over i ...

Save the status of checkboxes in a JSON file using boolean values of true or false

When a user submits a form, I am retrieving the values of checkboxes and storing them as an array. The simplified form structure is as follows: <!-- gym_create.html - other input fields are omitted for brevity --> <form class="create-gym" role=" ...

Is it possible for me to replicate this full-screen flash animation using jQuery?

I need some guidance on how to create an animation similar to the one on http://flatuicolors.com without using flash. When you click a color on the website, it triggers a full screen animation with text. I'm not asking for code, just ideas on how to ...

Error: authentication failed during npm installation due to an incorrect URL

After executing npm install @types/js-cookie@^2.2.0, an error occurred: npm install @types/js-cookie@^2.2.0 npm ERR! code E401 npm ERR! Unable to authenticate, need: Basic realm="https://pkgsprodsu3weu.app.pkgs.visualstudio.com/" npm ERR! A com ...

Copy password input field content in Vue to clipboard

I'm currently working on a Vue app that includes a form input for creating passwords. I've managed to implement a button that shows/hides the password, but I'm struggling with adding a copy to clipboard function. It doesn't seem to be w ...

"How can I update a table in Flask using Chart.js and Pandas

I have developed a basic Flask application that includes a bar chart using Chart.js and a data table displayed below it. Check out the setup below: https://i.sstatic.net/QB6jQ.png (Live view: ) The bar chart I created counts the number of items for each ...

Establish a default v-model while utilizing vuelidate

Hey there! I have this input field, and I would like to use the computed state for the email as the v-model. Currently, I am using $v.emaill.$model from vuelidate. Is there a way to set this as the default v-model? html input.form-control(v-model="$v ...

HTML and JavaScript - Facing issues rendering HTML content during the conversion process from Markdown format

In this particular scenario, my goal is to transform the content inside #fileDisplayArea into markdown format. However, I am encountering an issue where the HTML code within the div element is not being rendered. <div id="fileDisplayArea"># Title ...

Refresh the NuxtJS page without causing any changes to the view

When I create a single page using the following code: page: \session_id.vue <template> <div> <v-skeleton-loader v-if="isLoading" boilerplate type="article, actions"> </v-skeleton-loader> <v-con ...

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

I have developed a service that is supposed to retrieve data from a JSON file and assign it to an array called 'countries', which will be used throughout the application on multiple pages. However, when I call the method getCountries, the countri ...