1

Eu gostaria de saber posso exibir este dropdown sem que o usuário precise clicar para que seu conteúdo seja acessado, apenas deslizando o mouse sobre o MSDNAA-Microsft, por exemplo.

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      MSDNAA-Microsoft
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Suporte MSDNAA</a>
      <a class="dropdown-item" href="https://login.microsoftonline.com/" target="_blank">E-Mail</a>
      <a class="dropdown-item" href="https://fatec.onthehub.com/WebStore/Welcome.aspx" target="_blank"">Microsoft Imagine</a>
    </div>          
  </li>
1
  • 1
    Você usou a tag "acessibilidade" e me lembrou de uma coisa... Como é que um usuário que não usa mouse vai acessar o conteúdo? (num tablet, por exemplo, ou navegando usando o teclado) - No caso do teclado ainda tem o :active, mas no caso de outras tecnologias precisa pensar em alternativas. O próprio bootstrap abandonou essa idéia por que ela é ruim para usabilidade (mesmo para usuários normais). As pessoas nem sempre fazem o hover voluntariamente, e não é todo mundo que gosta de coisas pulando pela tela só por estar passando ocasionalmente com o pointer pela tela.
    – Largato
    Commented 17/05/2018 às 15:28

2 Respostas 2

1

No novo bootstrap o sistema de hovering foi retirado

http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Uma forma de você colocar essa opção novamente é adicionando a seguinte linha de código ao seu CSS

.dropdown:hover>.dropdown-menu {
     display: block;
}
0

É possível fazer só no :hover sim. Vc precisa pegar o CSS de quando ele está ativo e coloca no :hover do toggler. Ai vc faz essa regra no css .dropdown:hover .dropdown-menu { }

Veja no modelo abaixo como fica depois de pronto. Repare também que dessa forma nem precisa de javascript

OBS 1: Tomei a liberdade de mexer um pouco no estilo. Deixei os comentário no código do CSS. Se vc for usar esse Drop em outras situações aconselho usar classes novas e não editar as default do Bootstrap...

.dropdown:hover .dropdown-menu {
    display: block;
    position: absolute;
    transform: translate3d(5px, 28px, 0px); /* distancia entre menu e btn */
    top: 0px;
    left: 0px;
    will-change: transform;
}
.dropdown {
    display: inline-block; /* deixa o LO do "tamanho do próprio texto" e não da largura inteira da tela*/
    list-style: none; /* rita a "bolinha" do LI*/
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" >
        MSDNAA-Microsoft
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Suporte MSDNAA</a>
        <a class="dropdown-item" href="https://login.microsoftonline.com/" target="_blank">E-Mail</a>
        <a class="dropdown-item" href="https://fatec.onthehub.com/WebStore/Welcome.aspx" target="_blank">Microsoft Imagine</a>
    </div>          
</li>

OBS 2: Tive que tirar alguns atributos padrão dos dropmenus do Bootstrap para ele não ser mais clicável ok.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .