Creating a hover effect instead of a click event in a Bootstrap 4 dropdown menu

Looking to create a hover effect instead of a click in the bootstrap dropdown menu?

Past answers lack jQuery code that can simply be copied and pasted into your script for optimal results. Additionally, previous solutions were written for older versions of Bootstrap, which may not work with Bootstrap 4. For instance, this question is outdated, while the current answer provides a concise piece of code that works universally. 

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>


      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle uppercase  outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
          <div class="dropdown-menu">
            <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
            <a class="dropdown-item uppercase" href="#">Company</a>
            <a class="dropdown-item uppercase" href="#">Our process</a>
            <a class="dropdown-item uppercase" href="#">Services</a>
            <a class="dropdown-item uppercase" href="#">Contact us</a>
            <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
          </div>
        </li>
        
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To create a mouse over event using jquery and apply the same styles and properties that are added by the click event, you can use the following code:

$( ".dropdown-menu" ).css('margin-top',0);
$( ".dropdown" )
  .mouseover(function() {
    $( this ).addClass('show').attr('aria-expanded',"true");
    $( this ).find('.dropdown-menu').addClass('show');
  })
  .mouseout(function() {
    $( this ).removeClass('show').attr('aria-expanded',"false");
    $( this ).find('.dropdown-menu').removeClass('show');
  });
<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>


      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle uppercase  outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
          <div class="dropdown-menu">
            <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
            <a class="dropdown-item uppercase" href="#">Company</a>
            <a class="dropdown-item uppercase" href="#">Our process</a>
            <a class="dropdown-item uppercase" href="#">Services</a>
            <a class="dropdown-item uppercase" href="#">Contact us</a>
            <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
          </div>
        </li>
        
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

A workaround to prevent the menu from being hidden after the mouse out is to set margin-top:0 to the dropdown-menu.

Answer №2

Simply initiating the click event within the hover() function will get the job done:

$('.nav-link').hover(function() {
    $(this).trigger('click');
}, function() { });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active uppercase" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
    <div class="dropdown-menu">
      <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
      <a class="dropdown-item uppercase" href="#">Company</a>
      <a class="dropdown-item uppercase" href="#">Our process</a>
      <a class="dropdown-item uppercase" href="#">Services</a>
      <a class="dropdown-item uppercase" href="#">Contact us</a>
      <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
    </div>
  </li>
</ul>

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

JQuery - Fancy Product Designer is malfunctioning on local host but is functioning properly when accessed through the local full

I've been trying to integrate the fancy product designer jQuery plugin into my website, but I'm facing an issue. When I access the site through localhost, the plugin doesn't seem to work. However, if I directly open the file from its locatio ...

jquery

Adjust the size of a map on an HTML page after it has

Currently, I am utilizing Angular 2 to create a simple webpage that includes a Google 'my map' displayed within a modal. <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll ...

htmlangularjstypescript

Model-view-controller: Error 404 encountered while making an ajax request

Displaying multiple flights in a view with individual buttons for each flight to show details on click. foreach (var item in Model) { <div class="toFrom"> <h3 id=&qu ...

c#jqueryajaxasp.net-mvcasp.net-ajax

React application experiencing issues with MQTT and Mosquitto broker connectivity

Upon installing the Mosquitto broker, I successfully tested it in my command prompt. However, when I attempted to establish a connection with my React application, I encountered the error message: "WebSocket connection to 'ws://localhost:1883/' f ...

javascriptreactjswebmqtt

The error with Bootstrap4 alpha6 modal is in the process of transitioning

Currently, I am facing an issue with the bootstrap4 alpha 6 modal. The error message I am receiving is: Error: Modal is transitioning This occurs when attempting to re-trigger the same modal with dynamic data using a JavaScript function like this: funct ...

javascriptjquerymodal-dialogbootstrap-4

Error Message: Execution Not Recognized and Missing Requirement

After going through numerous threads, I couldn't find a solution to my specific issue. It's quite unclear what I've installed or uninstalled, but I'm hoping that this error message and its details might provide some clarity. Even though ...

javascriptnode.jsexpressnpmmean.io

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

css

Styling the first child element within a list using the li tag

<ul> <li class="bla">aaa</li> <li class="my_li">sss</li> <li class="my_li">ddd</li> <li class="my_li">fff</li> </ul> css: .my_li:first-child{ ...

htmlcss

Managing Alert and Confirmation Pop-ups Using JavascriptExecutor in Selenium with GhostDriver

In my current project, I am facing a challenge. I am utilizing Selenium 2.42.2 along with the phantomjsDriver 1.1.0 in Eclipse using Java. It is crucial for my test to be able to identify and save messages from Alerts, Confirms, and possibly Prompts when a ...

javajavascriptselenium-webdriverphantomjsghostdriver

The horizontal scroll bar in Jquery Datatable keeps disappearing intermittently

Issue with Jquery Datatable: Horizontal Scroll Bar Disappearing Intermittently Lately, a footer element was added to the existing data table which previously functioned properly. However, since the addition of the footer, there have been intermittent prob ...

jquerydatatables

What is the method for revealing elements with a click?

Every time I click on a button, the number 1 is displayed. However, upon clicking again, an error occurs stating that "push" is not a function. It appears that index 1 in the button array has been pushed into state.num, causing the type of state.num to cha ...

javascriptarraysreactjsjsx

Tips for organizing and nesting form data

Can I format my data in JSON like this: { attachments: { file: [ { name: 'pic1.jpg' }, { name: 'pic2.png' } ], username: 'Test', age: 1 } } Is it achievable us ...

javascriptmultipartform-dataform-data

Prevent jQuery from running multiple times by halting its execution after the

I have a unique JavaScript code snippet that triggers automatic form submission on page load, but it keeps repeating. I am looking to add a button that will trigger the submission only once when the page loads. Custom JavaScript Solution $(document).read ...

jqueryasp.net-mvcmodel-view-controller

Notify which items have been selected in the ListBox and CheckBoxList without using a for loop

My ASP.NET application includes a ListBox and CheckBoxList. I have implemented code that uses onchange event to alert the selected items, but I am looking for a way to achieve this without using a for loop. Can you provide assistance? <asp:ListBox ID=" ...

jquery

Issue with functionality of Bootstrap 4 Checkbox accordion

I am trying to achieve something similar to this example: https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets Instead of using a button, I want to use a checkbox. I want the collapse effect to occur when the checkbox is checked. < ...

javascriptbootstrap-4

User interface design for node.js and jquery web applications

When using node.js for web applications, is there a preferred UI framework to pair with it? Or is this an independent consideration? While jQuery is popular, is jQuery UI the most commonly used UI framework with the jQuery engine? Ar ...

javascriptjqueryhtmlnode.js

Tips for resizing a 100% div without displaying vertical scrollbars in the browser

I am facing an issue with a table that has three rows. I have a main #container div with a height of 100%, and inside it is a table with 3 rows. The first and last row contain fixed size content. However, in the second row, there is a #content div with a h ...

javascriptjquerycss

The unequal division of space between two flexed child divs is caused by varying image sizes

In my parent container, I have set the display property to flex. Inside, there are two divs with both having flex:1 set. However, the first child div contains an image and takes up twice as much space as the second div. If the screen is 1000px in height, ...

htmlcss

Is there a solution to resolving the type error that I am unable to identify?

I am attempting to implement a custom cursor feature in Vue 3, but unfortunately my code is not functioning as expected. Below you can find the code snippet I have been working on: <template> <div id="cursor" :style="cursorPoi ...

javascriptvue.jsvuejs3

Detecting page scrolling in Angular can be a challenging task

Having some issue with detecting scroll events in Angular. Here's the code snippet: @HostListener("window:scroll", []) onWindowScroll() { console.log("hello"); } Can anyone spot what I'm doing wrong? ...

javascriptangular