How to make hover effect instead of click in bootstrap 4 dropdown menu?

Question

How to make hover effect instead of click in bootstrap dropdown menu?

Previous answers don't contain jquery code that you can just past into you own script and get a great result. Apart from this, previous answers wrote for old version bootstrap, and for bootstrap 4 they don't work. For example this question too old, + current question contain a small piece of code which will work for all.

<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>

Take a look at [this question](https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) — Master Yoda, May 01 '18 at 12:20
@MasterYoda - That question only addresses v3 and below as of 7/18/2018 — Radmation, Jul 18 '18 at 23:16

Renzo Calla · Accepted Answer · 2018-05-01T12:43:13.393

You could add a mouse over event using jquery and apply the same styles and properties that the click event adds..

$( ".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 work around to prevent the menu being hidden after the mouse out is to set margin-top:0 to the dropdown-menu

Already updated the answer... – Renzo Calla May 01 '18 at 12:43 — Renzo Calla, May 01 '18 at 12:43

Mamun · Answer 2 · 2018-05-01T13:25:27.617

Just triggering the click event on hover() will do the trick:

$('.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>

How to make hover effect instead of click in bootstrap 4 dropdown menu?

2 Answers2