Is it possible to customize the Menu hover effect in Element Plus and Vue?

Hello everyone, I'm a beginner with Vue, HTML, CSS, and Element Plus. I am trying to customize a Side Bar Menu with my own hover effect, but it doesn't seem to be working. Whenever I change the background color of the el-menu element, the hover effect disappears. I have attempted using :hover on the el-menu element to change the background color, but that hasn't worked either. The default hover effect color is light blue, but I need it to be light gray instead.

I am currently using Vue3

The Sidebar I am looking to use can be found here:

Answer №1

After testing it on the element-plus playground, I found that overriding it from the el-menu class works perfectly. here is where I conducted the test. Can you provide more details?

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

Dynamically Add Routes in ExpressJS During Runtime

I am interested in creating routes dynamically at runtime, but I'm not entirely sure how to do it. Currently, I have the following code snippet: var app = express(); function CreateRoute(route){ app.use(route, require('./routes/customchat.js&ap ...

Knockout text binding does not automatically update the width

Recently, I encountered a bug in an ongoing project where the user name was appearing within another element until hovered over with a cursor. Upon further investigation, I discovered that this issue stemmed from the project's usage of Knockout.js. I ...

varying perspectives in different browsers within my React application

I'm experiencing inconsistencies in the appearance of my website when viewed on Chrome mobile compared to Safari on an actual phone. Despite using prefixes for all my styles (WebKit, etc.) and incorporating normalize.css to address any issues, the dis ...

Having trouble with submitting a form using @submit in Vue 3

I am facing an issue with the vuejs @submit.prevent feature in my login form. When I click the login button on my website, it does not work as expected. Even after adding a catch error in the function, the console still shows nothing. Can someone please as ...

Looking to retrieve the values of a 3-level dropdown using ajax. Successfully fetched the value of the 1st dropdown, but unsure of how to retrieve the values of the 2nd and

I have successfully managed to retrieve all values, but when the 2nd and 3rd drop-downs are populated through Ajax, how can I access those values? I am looking for a way to fetch the values of the 2nd and 3rd drop-down without resorting to session variable ...

The pages are constantly showing an error message that reads, "There is a problem with the SQL syntax in your code."

I am having trouble with my login page as it is displaying an error on my index.php file. Below is the code snippet from my index.php: <?php include('supsrwk_epenyenggaraan.php'); ?> <?php if (!function_exists("GetSQLValueString")) { f ...

Move the footer to the bottom of the page

Is there a way to position my footer at the bottom of the screen and make it extend to the full width in a responsive manner? Custom CSS for Footer: * { margin: 0; } html, body { height: 100%; } .page-wrap { min-height: 100%; margin-bottom: -142p ...

Troubleshooting Parallax Logic in NextJS

import Head from 'next/head' import styles from '../styles/Home.module.css' import Image from 'next/image' import React, { useRef ,useEffect, useState } from 'react'; export default function Home() { let ref = use ...

Making an entire webpage background clickable using just HTML and CSS

Is there a way to make the entire background of the page clickable using just HTML and CSS? <div style="position: fixed; top:0px; left:0px; z-index: -1; background: url() center center no-repeat; width: 100%; height:100%;"> <a href='http ...

Having trouble implementing connect-busboy in my Node.js application

Currently, I'm trying to implement image uploads in my node.js application using connect-busboy. Here's the code snippet I've written based on the reference guide https://www.npmjs.org/package/connect-busboy: router.post('/upload&apos ...

select items using a dropdown menu in an Angular application

Let me describe a scenario where I am facing an issue. I have created an HTML table with certain elements and a drop-down list Click here for image illustration When the user selects in, only records with type in should be displayed Another image refere ...

Implement necessary validation for the country code selection on the dropdown menu using the intl-tel-input jQuery plugin

Check out the intl-tel-input plugin here Currently, I am utilizing this plugin and attempting to implement required validation on the country code drop-down. However, the plugin seems to be restricting me from achieving this. I have made several attempts ...

Learn how to bypass the problem of self-signed certificates in request-promise

In my node application, I am utilizing the request-promise module to make API calls. You can find more information about it here. import request from 'request-promise'; let options = { method: GET, json: true, ...

Transforming an HTML Attribute into a JavaScript Object

I'm encountering an issue with converting an HTML-data attribute into a JavaScript Object. Here is my approach: The data Attribute appears as: <a id="stringObj" data-string="{'Foo':'Bar'}">Some A-Tag</a> In JavaScri ...

Implement a feature that adds a circle element when an image is clicked in a React application

I am attempting to create a program that allows users to add circles to an image by clicking on it. Essentially, when the user clicks at coordinates (x,y), a circle with a radius of 10 will appear at that location. I am exploring ways to implement meta-pro ...

Switching out the background image with a higher resolution one specifically for users with retina devices

I'm trying to create my very first website that is retina ready, but I've run into an issue when it comes to updating images to higher resolutions in CSS. I'm unsure how to go about having a standard image as the background and then switchin ...

Is there a method to prevent the json file from being constantly overwritten?

After running this code, I noticed that even when inputting a different userId, it still ends up overwriting the existing user instead of adding a new one as intended. const user = userId; const userObj = {[user]:valueX}; words.users = userObj; f ...

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...

Cleaning a string of word characters in Javascript: a step-by-step guide

I have been working on cleaning strings that were transformed from word text, but I am facing an issue with removing the special character '…' When I click on the "clean" button, the script currently removes all dots and only one special ...

Can I position two div elements next to each other, with one div partially offscreen, without utilizing display none or setting its width to zero?

Is it possible to position one div outside of the screen width while setting two divs side by side? I am looking to insert DIV2 above DIV1 with animation without adjusting its width or display. The goal is for DIV2 to enter the screen from the side alread ...