Using CSS to change the background color of a dropdown list when the mouse hovers over it

When working with my MVC Razor layout view, I encountered an issue where I couldn't set the background color of my dropdown list on mouse hover:

The dropdown list appears like this:
            <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Partner <b class="caret"></b></a>
                                    <ul class="dropdown-menu" style="background-color:#080808">
                                        <li class="marv-main-li">@Html.ActionLink("Test1", "Action1", "Partner")</li>
                                        <li class="marv-main-li">@Html.ActionLink("Test2","Action2","Partner")</li>

                                        <li class="marv-main-li">@Html.ActionLink("Test3","Action3","Partner")</li>
                                        <li class="marv-main-li">@Html.ActionLink("Test4","Action4","Partner")</li>
                                    </ul>
                                </li>}

My attempted CSS solution did not work:

 .dropdown .dropdown-menu .li a:hover {
                background-color: #06fa12;

            }

How can I successfully change the background color of the text in the dropdown list upon mouse hover?

It's important to note that I am using Twitter Bootstrap 3.

javascripthtmlcss

Answer №1

If the element <li> is not assigned a class, it's important to exclude the dot before the li in your CSS file.

An adjusted example could look like this:

.dropdown .dropdown-menu li a:hover {
            background-color: #06fa12;
        }

Answer №2

Changing a parent element when hovering over a child element may seem like a challenge, but with the power of JavaScript and jQuery, it can be easily achieved.

http://example.com/jsbin-hover-solution/

$(function() {
  var container = $('.Parent'),
      item = $('.Child');

  item.mouseover(function() {
    container.addClass('hovered');                      
  });
  item.mouseout(function() {
    container.removeClass('hovered');
  });
});

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

The error message "Type 'Observable<void>' cannot be assigned to type 'void | Action | Observable<Action>' when integrating an effect" is displayed

Encountering an error when trying to add effects using the 'run' method. Attempted to manually return a string, number, and other types, but nothing seems to work. Here is the effects code snippet: @Effect() getRoles$: Observable<Roles[]> ...

javascriptangulartypescriptreduxngrx

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

javascripthtmlseleniumselenium-webdriverxpath

Refreshing the database with new information from an HTML table

Presented below is a table structure: <table id="skuTable" role="grid"> <thead> <th class="skuRow">Order</th> <th class="skuRow">Machine</th> <th>Fab. Date</th> <th cl ...

javascriptphphtmlsql-serversqlsrv

CSS Sprites - Concealing the surplus section of the image

Greetings, I have implemented an Image Sprite to showcase a variety of Icons. XHTML <div class="ListIcons"> <ul> <li class="Icon i-scissors">A list item utilizing the <strong>i-scissors</strong> class.</li> ...

phphtmlcsscss-sprites

Complete a form submission with an AJAX call

Although the server side methods are functioning correctly, there seems to be an issue with the AJAX function setting data-duplicated="false" but not triggering $this.submit();. Instead, pressing the submit button again is required in order to actually sub ...

javascriptjqueryajaxforms

Utilize the fetch function within a React functional component

I have been experimenting with different methods to fetch data only once before rendering, but I am encountering some challenges: It is not possible to call dispatch in componentDidMount as there is a restriction that it can only be done in Functional c ...

javascriptreactjstypescriptreduxreact-redux

Avoiding the hashtag symbol in a serialized string

I have a serialized string that I am sending to the server, structured like this: counter=1&Id=4&type=2332&amount=3232&gstIncluded=3232&paymentMethod=2&notes=2332#fdsf&docId=0&ref=3232&isEdit=true The issue I am encoun ...

javascriptjqueryhtmlajaxstring

Show the value stored in the LocalStorage

I am attempting to utilize VueJS to display a LocalStorage value in my HTML, but I'm encountering difficulties retrieving the value. The error message I'm seeing is Uncaught (in promise) ReferenceError: currentCategory is not defined <h3 clas ...

javascriptvue.js

Tips for transferring a file to PocketBase using NodeJs

Currently, I am in the midst of a project that necessitates uploading numerous PDF files to a PocketBase collection. All the necessary files are saved on my computer and my goal is to upload them using nodejs along with the PocketBase JavaScript SDK. Howe ...

javascriptnode.jsfile-uploadpocketbase

Why is it that this particular image fails to load in the browser even after the website state has been fully restored?

My goal is to display a profile picture using an "src" link provided by the Twitch API. I anticipated the image would render correctly after the brief "Loading..." message, but instead, the loading message appeared briefly and then no image was rendered - ...

javascriptreactjsnext.js

Scale down the canvas element before retrieving the image data

In order to feed into an algorithm, I am looking for a way for users to draw on a canvas element and then convert it into an array of length 784. This array should represent the pixel shade intensity, which can be obtained using the ctx.getImageData() meth ...

javascripthtmlfabricjs

Creating a Cancel Button in JSP/HTML/JS/CSS Form: A Step-by-Step Guide

It is necessary to incorporate the functionality of "save" and "cancel" in the JSP code for this particular form. By selecting "save", the data entered into the form will be submitted to its intended destination. Alternatively, choosing "cancel" will dismi ...

javascriptjqueryhtmlcssjsp

Guide on utilizing Subscribe Observable for performing lookup in Angular

I am new to Angular and seeking guidance as my approach may not be the best. Please advise me on a better solution if you have one. My goal is to display a list of records in table format, retrieved from the database where only Foreign Keys IDs are availa ...

javascriptangular

What is the best way to populate a div with multiple other div elements?

My current project involves creating a sketchpad using jQuery for an Odin Project assignment. However, I have encountered an issue with filling the canvas (wrapper div) with pixels (pixel divs). The canvas does not populate correctly. Here is the link to m ...

javascriptjqueryhtmlcss

"Why is it that when the form is submitted, only half of your React component's props are undefined

Just starting out with React, and I'm hoping this issue isn't too obvious. I've been struggling with it for a while now. When looking at the React Dev Tools in Chrome, all of the form's props are defined and appear as expected, even af ...

javascriptformsreactjsecmascript-6undefined

Tips for handling value updates when a user clicks a checkbox using jQuery

Having trouble with updating values when a checkbox is clicked. When the checkbox is clicked once, the value is added correctly. However, if the user rapidly clicks on the same checkbox multiple times, the value is not added or subtracted properly and gets ...

jqueryhtmlajaxsymfonycheckbox

Is there a way to identify the tag name based on the mouse's position?

Is it possible to select an HTML tag based on the position of the mouse? When I move the mouse, can I update, for example, the border of a tag at the mouse's current position? ...

javascriptjqueryajax

The image sequence animation only loads once and does not continue indefinitely

Here is my code snippet: I have a sequence of 15 images that should load one after the other in a loop with a specific time interval. However, I am facing a bug where the images keep playing infinitely when the page loads, but I want them to play only once ...

javascripthtmlcss

What are some methods for turning off auto-validation in Internet Explorer 10 when using HTML 5?

When I added the max-length attribute, I encountered an issue where I am receiving a certain message in IE (Internet Explorer). However, I do not want this message to appear as it is unnecessary - the validation should occur silently. I have tried using th ...

angularjshtml

Issue with retrieving date from MySQL column being a day behind in JavaScript (Node.js)

I currently have a Node.js server up and running as the API server for a service that I am developing for a company. The dates stored in the MySQL server that it connects to are related to event start times. Insertion of these dates is flawless, and when ...

javascriptmysqlnode.jsdatetime