Simulate Hover with JQuery

Navigation
0

I have a navbar of Bootstrap with drop-down. I want to make hover in the div class="dropdown-content" dropdown also activate the hover of the menu option a class="nav-link" , since I have put styles to the option for hover , but when I move to expand it stops be hover on the option and remove the style.

The html fragment is as follows 

<li class="nav-item dropdown">
        <a class="nav-link" href="#"><i class="fa fa-database"><span class="tag">    BBDD<hr class="subrayado"></hr></span></i></a>
        <div class="dropdown-content">
            <a href="#"><i class="fa fa-folder-open"><span class="tag">    Clientes Totales</span></i></a>
            <a href="#"><i class="fa fa-folder-open"><span class="tag">    Consulting</span></i></a>
            <a href="#"><i class="fa fa-folder-open"><span class="tag">    Compliance</span></i></a>
            <a href="#"><i class="fa fa-folder-open"><span class="tag">    Digital Transformation</span></i></a>
            <a href="#"><i class="fa fa-folder-open"><span class="tag">    Tech Talent</span></i></a>
        </div>
</li>

and what I'm trying with jQuery is this: 

$(".dropdown-content").hover(function(){
    $(this).parent().children().find("a").trigger("mouseenter");
    }, function(){
    $(this).parent().children().find("a").trigger("mouseleave");
});

Every time I do hover on the drop-down or exit the drop-down I get an error by console that says:

  

Uncaught RangeError: Maximum call stack size exceeded

Let's see if you can help me. Thanks.

    
asked by xero399 13.12.2018 в 11:52
source

3 answers

2

And with only CSS?

The :hover in the parent ( .dropdown ) and filter the children of dropdown-content to only change the one that has the :hover propagated ( .dropdown-content a:hover ), so a single event changes several things. 

.dropdown {
  background: aqua;
  cursor: pointer;
}

.dropdown:hover>.dropdown-content a:hover {
  background: blue;
}

.dropdown>.nav-link {
  background: yellow;
}

.dropdown:hover>.nav-link {
  background: red;
}


/*****/

.navbar-nav {}

.nav-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.nav-item.dropdown .dropdown-content {
  display: none;
}

.nav-item.dropdown:hover .dropdown-content {
  display: block;
  width: 10rem;
}

.dropdown-content a {
  display: block;
}
<ul class="navbar-nav">
  <li class="nav-item">asdfasdf</li>
  <li class="nav-item dropdown">
    <a class="nav-link" href="#"><i class="fa fa-database"><span class="tag">BBDD<hr class="subrayado" /></span></i></a>
    <div class="dropdown-content">
      <a href="#"><i class="fa fa-folder-open"><span class="tag">Clientes Totales</span></i></a>
      <a href="#"><i class="fa fa-folder-open"><span class="tag">Consulting</span></i></a>
      <a href="#"><i class="fa fa-folder-open"><span class="tag">Compliance</span></i></a>
      <a href="#"><i class="fa fa-folder-open"><span class="tag">Digital Transformation</span></i></a>
      <a href="#"><i class="fa fa-folder-open"><span class="tag">Tech Talent</span></i></a>
    </div>
  </li>

</ul>
    
answered by 13.12.2018 / 23:02
source
0

Try this: 

<script>
    $(".dropdown-content").hover(function (event) {
        event.stopPropagation();
        $(this).parent().children().find("a").trigger("mouseenter");

    }, function (event) {
        event.stopPropagation();
        $(this).parent().children().find("a").trigger("mouseleave");        
    });
</script>

Source: link

If we avoid the propagation of the event we may stop the one that collapses the stack.

Another option would be to play with the classes: 

<script>
    $(".dropdown-content").hover(function (event) {
        $(this).parent().children().find("a").addClass("simula-mouseenter");

    }, function (event) {
        $(this).parent().children().find("a").removeClass("simula-mouseenter");        
    });
</script>
    
answered by 13.12.2018 в 12:40
0

Try this; will activate the hover to nav-link: 

var link=window.location;
if(link=='http://www.tu-sitio-donde-quieres-el-hover'){
 $('li.nav-item .nav-link').addClass('hover');
}
    
answered by 13.12.2018 в 16:44
Error 1826: Duplicate foreign key constraint name, I need you to help me see where the error comes from Do a modal window correctly?