Ways to modify the hue of an li element in the context menu upon hovering

I'm currently working on a project that involves VueJS and Bootstrap. To enhance user experience, I've incorporated a context menu using the npm package called vue-context Vue Context Menu

When a user hovers over an item on the context menu, the option stands out with a blue color like this:

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

The code snippet for the context menu is as follows:

<vue-context ref="menu">
    <ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
        
        <!-- More context menu items -->
        
    </ul>
</vue-context>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

I am looking to customize the hover effect by changing the color to something different. Any suggestions or help would be greatly appreciated!

javascripthtmlcsstwitter-bootstrapvue.js

Answer №1

To modify the appearance of the .context-menu-item class, you simply need to include a CSS rule:

new Vue({
  components: {
    VueContext
  },
  el: '#app',
  methods: {
    onClick(text) {
      console.log(test)
    }
  }
})
.context-menu-item:hover {
  background-color: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="983c3f2f673b37362c3d2028197ad9d4ced4ca">[email protected]</a>/dist/vue-context.min.js"></script>

<div id="app">
  <div>
    <p @contextmenu.prevent="$refs.menu.open">
      Right click on me
    </p>
  </div>
  <vue-context ref="menu">
    <ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="fa fa-share-alt" id="context-menu-icon"></i><span class="context-menu-span">Share</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="fa fa-copy" id="context-menu-icon"></i><span class="context-menu-span">Copy/Move</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='far fa-star' id="context-menu-icon"></i><span class="context-menu-span">Add to Starred</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-cloud-download-alt' id="context-menu-icon"></i><span class="context-menu-span">Download</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-pencil-alt' id="context-menu-icon"></i><span class="context-menu-span">Rename</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-tag' id="context-menu-icon"></i><span class="context-menu-span">Tags</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="far fa-trash-alt" id="context-menu-icon"></i><span class="context-menu-span">Delete</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="far fa-chart-bar" id="context-menu-icon"></i><span class="context-menu-span">Access Stats</span></li>
    </ul>
  </vue-context>
</div>

Answer №2

For additional details on the !important rule in CSS, take a look at this helpful question.

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

Issues arise when trying to manage HTML received as a response from a server in plain text

I have a scenario where I am dynamically generating an HTML table on the server side using Java and then sending it to the client as JSON data. The response looks something like this: <table class="table"></table><thead class="thead-dark"&g ...

javascriptjqueryhtml

What is the reason behind causing the overflow to become visible on the parent anchor when a child anchor is added?

I've been facing a puzzling issue for the past day. I am working on creating a website that resembles Windows 8, where each box represents a list item. The code is more complex than what I have shared here, but the problem seems to be isolated... &l ...

htmlcss

Issue with custom font display malfunction

I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here? <style> .stonefont @font-face { font-fa ...

htmlcssfont-face

width and height specifications for the device

Struggling to determine the device-height after setting predefined device-widths such as: For Extra small devices Phones (<768px) For Small devices Tablets (≥768px) For Medium devices Desktops (≥992px) For Large devices Desktops (≥1200px) I& ...

cssresponsive-designmedia-queries

Is it possible to iterate through HTML elements without relying on forEach()?

Currently working on my web-based system using Node.js and HTML. Are there any alternative ways to iterate through HTML elements without using forEach? I'm considering something like this (for example): <% for(var ctr=0; ctr<arrayname.length ...

javascripthtmlnode.jsexpresshtmlelements

Is Moment.js displaying time incorrectly?

When using moment.tz to convert a specific date and time to UTC while considering the Europe/London timezone, there seems to be an issue. For example: moment.tz('2017-03-26T01:00:00', 'Europe/London').utc().format('YYYY-MM-DD[T]HH: ...

javascriptdatedatetimetimezonemomentjs

Activate continuous speech identification

Is it possible to activate the capability of recognizing continuous speech through the REST API (using javascript SDK) with the Bing Speech API? The Javascript SDK example available at https://github.com/Microsoft/Cognitive-Speech-STT-JavaScript only seem ...

javascriptspeech-recognitionbing-apiazure-cognitive-services

What is a memory-saving method to clear an object in JavaScript?

I am looking for a way to use the same object repeatedly in JavaScript by emptying it after its purpose is served, without creating a new object each time. In arrays, I usually do arr.length=0 to clear an array instead of assigning it to a new memory locat ...

javascriptjson

Executing a function automatically when a component loads in react-redux can be achieved by utilizing useEffect hook in functional components

I have developed a webpage specifically designed to manage a "Cart" feature, with Cart details being fetched from a database. Upon clicking the "Click me" button, all the retrieved data is displayed within a react component. My goal now is to showcase the ...

javascriptreactjsreduxreact-redux

Increase the lag time for the execution of the on('data') function in Node.js

In my current function, it searches data from a database and performs an action with it. For the purpose of this demonstration, it simply increments a counter. exports.fullThreads = function(){ return new Promise((resolve, reject) => { MongoClien ...

javascriptnode.js

Validating Users with OpenID in Vue.js

Utilizing the oidc-client in a basic VueJs project. The IDP server information is correctly configured in SecurityServices.js, with the following oidc config: var mgr = new Oidc.UserManager({ userStore: new Oidc.WebStorageStateStore(undefined), aut ...

vue.jsauthenticationauthorizationidpoidc-client-js

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

Here are some tips for retrieving information from a JavaScript object

My goal is to extract the values of free_time, done_ratio, criticalTask, and dependency from a JavaScript object for each task. I attempted to achieve this, but unfortunately, it didn't yield the desired results. var mock_data_allocation = {"alloc ...

javascriptjquery

React component closes onBlur event when clicked inside

I recently developed a React component using Material UI which looks like the code snippet below: <Popper open={open} anchorEl={anchorRef.current} onBlur={handleToggle} transition disablePortal > <MenuList autoFocusItem={open}> ...

javascriptreactjsmaterial-ui

Integrating Excel into a webpage - is it possible?

Currently facing an issue on my website. I'm trying to open a 'file://' URL directly with the <a href=""> element in a browser, but it's prohibited. I'm searching for a plugin or similar solution that can enable me to execut ...

javascriptphpjqueryajaxexcel

Harvest information from various files

I have a collection of 278 Html files containing essays written by various students. Each file includes the student's ID, first name, and last name in this format: <p>Student ID: 000000</p> <p>First Name: John</p> <p>Las ...

javahtmltextextract

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

Is there a way to adjust only the height of a responsive image?

Increasing the Height of an Image on a Mobile Device! I have an image that displays as the header of my website. When I resize the window to mobile format, the image resizes too. However, I want the height of the header image to be longer! Is this possibl ...

csshtml

Simultaneous activation of CSS classes by multiple RouterLinkActive components

Using multiple <a> tags with routerLink presents a unique behavior. Upon loading the home page, the home icon in aMenuItems is correctly given the active class through routerLinkActive, while the remaining elements in the array do not have this class ...

htmlcssrouter

Extract the post date/time directly from the HTML code without relying on JavaScript

I encountered an issue while attempting to store the time and date from a form into a variable. An error message indicated that the variable was unknown. Below is the code I used: HTML <div class="form-group"> <label for="dp">Departure Da ...

phphtml