Problem in scroll hover

Asked

Viewed 207 times

4

When I mouse the button and see the content I can’t use the scroll bar, simply hide the content, someone can give a 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>

css

  • tried to comment line: overflow: hidden; which is declared 2x in .mostrar?

  • Yes I tested here, but nothing has changed.

  • when I executed your code, appeared the scrollbar and content...]

  • @Jcsaint the problem is when they put the mouse on top of the scroll bar, the content closes.

  • That when you hover over the scroll bar, close the content, that’s the problem.

  • I could not reproduce the problem, for me appeared the scroll bar and if I stop the mouse on top of the bar the content is still there :/ I’m using Mozilla Firefox 52

  • 1

    The error is in Chrome, firefox worked normal too

  • Samuel, click on the "active" content and you can scroll (maybe knowing this solves the problem). EDIT: Actually works the scroll of the mouse the bar even does not give rs

Show 3 more comments

1 answer

2


I did several tests and the div continued to fade, until I customized the scrollbar and worked as expected. So since the problem is only with Chrome, you can use a scrollbar customized, has various forms of detect if the browser is Chrome, follows an example of scrollbar, customizing it to div doesn’t go away.

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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.