CODEWITHSUNDEEP
htmlcsshover
Arek Pawlak
Arek Pawlak

Reputation: 3

Hover don't works as expected

The problem is that when I hover on li, hover do not work, with the first one it works but hover area is not the same as div's size.

This is a sidebar that works by checkbox without javascript.

here is HTML

 <input type="checkbox" id="sidebartoggler">

<div id="page-wrap">
  <label for="sidebartoggler" id="toggle">☰</label>
<div id="sidebar">
    <ul class="elements">
      <li>Str. Glowna</li>
      <li>Wyb. przedmiotu</li>
    </ul>
</div>

<div class="page-content">

and CSS

.page-content
{
  position: relative;
  z-index: 0;
  transition: padding-left 0.5s;
}
#chose
{
  font-size: 40px;
  text-align: center;
  margin: 5% 0 5% 0;
}
#sidebar
{
  position: fixed;
  left:-190px;
  right: 0;
  top: 0px;
  bottom:0px;
  width: 170px;
  padding: 10px;
  background: #333;
  transition: left 0.5s;
  display: inline-block;

}
#toggle
{
  position: fixed;
  left:20px;
  top: 15px;
  font-size: 30px;
  transition: left 0.5s;
}
#sidebartoggler
{
  display: none;

}
#sidebartoggler:checked + #page-wrap #sidebar
{
  left:0px;

}
#sidebartoggler:checked + #page-wrap #toggle
{
  left:200px;

}
#sidebartoggler:checked + #page-wrap .page-content
{
  padding-left: 180px;

}
.page-content
{
  padding-left: 0px;
}
#sidebar ul
{
  font-size: 15px;
  list-style: none;
  list-style-position: inside;
  width: 170px;
  margin: 20px 0 0 -40px;
  text-align: center;

}
#sidebar ul > li
{
  padding: 10px 0;
  margin: 5px 0 0 0;
  background-color: #444;
  display: block;
}
#sidebar ul > li:hover
{

  background-color: #555
}

Here you can see the full code: https://jsfiddle.net/2hnLyjw4/1/ Sorry for my english. Thanks for Your help!

Upvotes: 0

Views: 49

Answers (1)

Paul Abbott
Paul Abbott

Reputation: 7211

The problem is you are using padding-left on .page-content; this is causing the contents to shift to the right as desired, but the div is partially sitting on top of your menu and interfering with the hover events.

Change it to use margin-left:

.page-content {
  position: relative;
  z-index: 0;
  transition: margin-left 0.5s;
}

...

#sidebartoggler:checked + #page-wrap .page-content {
  margin-left: 180px;
}

.page-content {
  margin-left: 0px;
}

Upvotes: 1

Related Questions