Is there a way to create a hover effect on a sidebar element?

I'm struggling to add a hover effect to the elements within my sidebar. I've tried using CSS :hover, but it doesn't seem to be working as expected. Any guidance or solution would be greatly appreciated.

.sidebar .navbar .nav-link:hover{
  color: #EFDBFF;
  display: block;
  background: white;
  border-color: #EFDBFF;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafbcbbea5bba5b9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="header row ">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
  </div>
</header>
<div class="body row ">
  <div class="sidebar col-2 " id="sidebar">
    <!--sidebar start-->
    <div class="navbar-nav w-100">
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
        <div class="dropdown-menu bg-transparent border-0">
          <a href="#" class="dropdown-item">A</a>
          <a href="#" class="dropdown-item">B</a>
          <a href="#" class="dropdown-item">C</a>
        </div>
      </div>
      <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Update PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Classify PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Estimate rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Update rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Reports</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Lookup information</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>User guide</a>
    </div>
    <!--sidebar end-->
  </div>
  <div class="content col-10"> Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>

javascripthtmlcsshoverbootstrap-5

Answer №1

Oops! Your CSS selector seems to be incorrect. Here's a corrected version that should help resolve your issue:

.sidebar .navbar-nav .nav-link:hover{
  color: #EFDBFF;
  display: block;
  background: white;
  border-color: #EFDBFF;
}

Answer №3

It appears that your selector is incorrect.

In your HTML code, you have used navbar-nav, so the correct selector to use should be .navbar-nav.

Your HTML snippet:

...
    <!--sidebar start-->
    <div class="navbar-nav w-100">
...

Therefore, the updated selector should be 

.sidebar .navbar-nav .nav-link:hover

.sidebar .navbar-nav .nav-link:hover{
  color: #EFDBFF;
  display: block;
  background: white;
  border-color: #EFDBFF;
}

This adjustment should resolve the issue at hand.

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

Combining Codeigniter with AJAX for an efficient system

I'm facing an issue with my like system where a user can give more than one like, but only one is being registered in the database. I suspect it's related to AJAX. Here is the button code: <a class="btn btn-xs btn-white" name="btn" onclick=" ...

javascriptphpajaxcodeigniter

Is there a way to implement this code to filter every column in the grid?

I have been using this code in my grid view, but it only filters one column of the grid. Now I want to modify the code to filter multiple columns. I tried implementing a loop, but it seems like the code is not working correctly. Is there a way to adjust t ...

javascriptjqueryasp.net

Managing the clearing of a view component in React or Vue.js

In my project, I have a container component that handles all the business logic, ajax requests, and data management. This container component has child components to which it passes data and methods as props. For example, there is a "CommentForm" compone ...

javascriptreactjsvue.jsvue-component

How can I include a ?ref query parameter in a URL when linking from external websites?

I've always wondered about how websites are able to include the ?ref parameter in their URLs when they are referred from another website. Do both sites need to incorporate this into their code? How does this function exactly? ...

phphtmlurlreferer

Permanently remove the span tag and any associated text from the HTML document

Currently, I am working on a project that involves numerous page numbers marked using the span class. Below is an example of this markup: <p>Cillacepro di to tem endelias eaquunto maximint eostrum eos dolorit et laboria estiati buscia ditiatiis il ...

javascriptjqueryhtmlcss

Select the five previous siblings in reverse order using jQuery's slice method

I have a unique approach to displaying a series of divs where only 5 are shown at a time using the slice() method. To navigate through the items, I include an ellipsis (...) link after every 4th item, which allows users to easily move on to the next set of ...

javascriptjqueryhtmlcssangularjs

Modifying vertices in THREE.LineSegment: Adding and deleting

I am facing an issue with a THREE.LineSegments object, where I need to dynamically change the number of vertices. However, when I try to modify the geometry vertices array, the lines with removed vertices remain in place. Is there a way to remove vertices ...

javascriptthree.js

Making adjustments to text in HTML without altering the CSS or styling is proving to be challenging

When attempting to modify a h1 tag without changing the CSS, I encountered an issue. Below is the string with and without the JavaScript: String without JavaScript: https://i.sstatic.net/JWOmq.png String with JavaScript: https://i.sstatic.net/RNMur.png ...

javascripthtmldom

Securing API keys in JavaScript

Despite extensive research online, I have been unable to find a suitable solution to a common issue regarding API key protection. The website in question is completely public with no secure login area, relying on API calls to various third-party websites ...

javascriptreactjsapicsrf

Experiencing difficulties connecting JavaScript with HTML

I'm encountering difficulty with implementing my JavaScript on my website. While it functions properly in this JS Fiddle, I am experiencing issues when trying to use it on my actual site. Below is how I have linked the JS on my site: <head> < ...

javascriptjqueryhtml

When using JavaScript to redirect with window.location, the referrer header is not properly set

Currently, I am attempting to utilize window.location in React to redirect to a third-party page. However, upon making the redirect, the third-party server is not receiving a referrer header from my redirection. Any assistance on resolving this issue wou ...

javascriptreactjshttpreferrer

How can I save the content from a tiptap editor in a PHP form?

I'm looking to integrate the TipTap editor into a PHP form as a textarea field. I've set up a Vue component and passed it to the blade view. Blade view: <form method="post" action="{{ route('dashboard.edit.postInfo', ...

javascriptlaravelvue.jslaravel-bladetiptap

What is the most effective method for disregarding undefined values?

Implementing a project using Vue.js and Vuex, I am retrieving data from an API that functions as a content-management system. The product class in the CMS possesses numerous properties that can be populated by the user, such as; { "title": &quo ...

javascriptvue.jsvuex

How come adjusting the margin of a div doesn't impact the placement of its child elements?

I'm trying to wrap my head around how css margins interact with divs and their child elements. For instance, when I set it up like this... <div style="clear: both; margin-top: 2em;"> <input type="submit" value="Save" /> </div> ...

htmlcss

What is the best way to dynamically assign classes to a single <li> element in Meteor when an event occurs?

I'm a newcomer to the meteor framework and I'm attempting to create a project where clicking on the name within a <li> element changes the background color to yellow. When another <li> element is clicked, the previous one should rever ...

javascriptmongodbmeteormeteor-blaze

What is the best way to display the information contained within a .nfo file on a website?

Does anyone know of a plugin or code that can display the content of a .nfo file on a webpage (html or php)? I want to create multiple web pages with individual .nfo files, but I'm not sure if this is achievable through coding or if there's a scr ...

phphtmlwebviewer

Unable to display value in Vue.js, however, the console log functions properly

As I embark on my journey with VueJS, I must admit that it is an amazing framework. However, I have encountered some issues with the Vue-Resource implementation, as it only seems to work properly half the time. When attempting to retrieve data from my ser ...

javascriptrestgetvue.js

Include variables in a JavaScript statement to create conditional functionality

Currently, my code is functioning as expected and appears like this: if (Number.isInteger(number)) { ffmpeg(video.mp4) .on('end', function () { console.log('Screenshots taken'); }) .screenshots ...

javascriptnode.js

Opting for a CSS framework instead of building custom CSS from scratch

In my quest to achieve the best CSS practices on my website, I initially relied on my own custom CSS. However, I then discovered the option of using CSS frameworks like Bootstrap or Foundation Zurb. While I believed that using a framework alone would meet ...

csstwitter-bootstrapzurb-foundationcss-frameworkscascade-framework

Transform a string into an object

How can I convert a string into an object with error details? const er= {'username': [ErrorDetail(string='A user with that username already exists.', code='unique')], 'email': [ErrorDetail(string='user with thi ...

javascriptreactjsnode.jsjson