4

Quando passo o mouse no botão e vejo o conteúdo não consigo usar a barra de rolagem, simplesmente oculta o conteúdo, alguém pode dar um help?

ul>li {
  list-style-type: none;
}

ul li:hover .mostrar {
  opacity: 1;
  height: 150px;
  overflow: auto;
}

.mostrar {
  background: #CCC;
  height: 15px;
  overflow: hidden;
  position: relative;
  margin-top: 0px;
  opacity: 0;
  height: 15px;
  font-size: 13px;
  overflow: hidden;
}

.conteudo-meio {
  width: 370px;
  position: absolute;
  left: 20px;
  z-index: 999999;
}
<ul>
  <li>
    <section class="conteudo-meio">
      <a href="#">Passar o mouse no menu</a>
      <div class="mostrar">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
        <p>Item 6</p>
        <p>Item 7</p>
        <p>Item 8</p>
      </div>
    </section>
  </li>
</ul>

8
  • tentou comentar linha: overflow: hidden; que está declarada 2x em .mostrar?
    – JcSaint
    17/03/2017 às 19:27
  • Sim testei aqui, mas não mudou nada. 17/03/2017 às 19:29
  • quando executei o seu código, apareceu a barra de rolagem e o conteúdo...]
    – JcSaint
    17/03/2017 às 19:32
  • @JcSaint o problema é quando poem o mouse em cima da barra de rolagem, o conteúdo fecha.
    – Mathiasfc
    17/03/2017 às 19:34
  • 1
    O erro é no Chrome, firefox funcionou normal também 17/03/2017 às 19:49

1 Resposta 1

2

Fiz vários testes e a div continuava sumindo, até que personalizei a barra de rolagem e funcionou como esperado. Então como o problema é só no chrome, tu pode utilizar um scrollbar personalizado, tem várias formas de detectar se o navegador é o chrome, segue um exemplo de scrollbar, personalizando ele a div não some.

ul>li {
  list-style-type: none;
}

ul li:hover .mostrar {
  opacity: 1;
  height: 150px;
  overflow: auto;
}

.mostrar {
  background: #CCC;
  height: 15px;
  overflow: hidden;
  position: relative;
  margin-top: 0px;
  opacity: 0;
  height: 15px;
  font-size: 13px;
  overflow: hidden;
}

.conteudo-meio {
  width: 370px;
  position: absolute;
  left: 20px;
  z-index: 999999;
}


/* Let's get this party started */

::-webkit-scrollbar {
  width: 12px;
}


/* Track */

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}
<ul>
  <li>
    <section class="conteudo-meio">
      <a href="#">Passar o mouse no menu</a>
      <div class="mostrar">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
        <p>Item 6</p>
        <p>Item 7</p>
        <p>Item 8</p>
      </div>
    </section>
  </li>
</ul>

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 .