Javascript 如何更改悬停时屏幕区域的背景色

我正在为一个学校项目制作一个网站，其中我有左抽屉和右抽屉。只有在单击

pageX<100

（左抽屉）和

pageX>1200

（右抽屉）时，抽屉才会隐藏并显示。由于抽屉只显示

onclick（）

，我希望该区域以某种方式高亮显示（最好是颜色变化），以便用户知道那里有东西。我该怎么做

HTML:

JavaScript:

$（函数（）{
var menuwidth=240；//滑动菜单宽度的像素值
var menuspeed=400；//滑动菜单动画时间为毫秒
变量$bdy=$（'body'）；
var$container=$（“#pgcontainer”）；
变量$hamburger=$（“#hamburgermenu”）；
var$rightmenu=$（“#rightdrawer”）；
var negwidth=“-”+menuwidth+“px”；
var poswidth=menuwidth+“px”；
$（'#pgcontainer'）。在（'click'，函数（e）上{
如果（e.pageX<130）{
if（$bdy.hasClass（'openmenu'））{
jsAnimateMenuLeft（“关闭”）；
}否则{
jsAnimateMenuLeft（“打开”）；
}
}
});
$（'.overlay'）。在（'click'，函数（e）上{
if（$bdy.hasClass（'openmenu'））{
jsAnimateMenuLeft（“关闭”）；
}
else if（$bdy.hasClass（'openmenur'））{
JSAnimateNuright（“关闭”）；
}
});
$（'a[href$=“#”]”）。在（'click'，函数（e）上{
e、 预防默认值（）；
});
函数JSAnimatementuleft（tog）{
如果（tog==“打开”）{
$bdy.addClass（'openmenu'）；
$container.animate（{marginRight:negwidth，marginLeft:poswidth}，menuspeed）；
$hamburger.animate（{width:poswidth}，menuspeed）；
$（'.overlay'）.animate（{left:poswidth}，menuspeed）；
}
如果（tog==“关闭”）{
$bdy.removeClass（'openmenu'）；
$container.animate（{marginRight:“0”，marginLeft:“0”}，menuspeed）；
$hamburger.animate（{width:“0”}，menuspeed）；
$（'.overlay'）.animate（{left:“0”}，menuspeed）；
}
}
});

我认为这里的最佳解决方案是再添加两个元素，将它们固定，并添加一些漂亮的悬停样式

请注意，由于

.leftdrawer hover

和

.rightdrawer hover

是

#pgcontainer

上的子对象，因此单击它们将完全按照您的需要进行操作，因为单击事件将冒泡到

#pgcontainer

，您将在其中检测它们并显示/隐藏相应的抽屉

#pgcontainer.leftdrawer悬停，
#pgcontainer.rightdrawer悬停{
内容：''；
位置：固定；
排名：0；
底部：0；
宽度：130px；
显示：块；
背景：rgba（2002002002004）；
}
#pgcontainer.rightdrawer悬停{
右：0；
}
#pgcontainer.leftdrawer悬停：悬停，
#pgcontainer.rightdrawer悬停：悬停{
背景：rgba（0,0,0,7）；
光标：指针；
}

---

可能是您应该从左到右创建100px宽度的重叠div，并在悬停时更改其颜色

  <div id="pgcontainer"> 
    <header>
      <div id="navbar">
        <div id="rightdrawer">
          <ul>
            <li><a href="#" class="btn btn-danger">Register</a></li>
            <li><a href="archives.html">Archives</a></li>
            <li><a href="contactUs.html">Contact Us</a></li>
            <li><a href="sponsors.html">Our sponsors</a></li>
          </ul>
        </div>
      </div>
    </header>
  </div>

$(function() {
  var menuwidth  = 240; // pixel value for sliding menu width
  var menuspeed  = 400; // milliseconds for sliding menu animation time

  var $bdy       = $('body');
  var $container = $('#pgcontainer');
  var $hamburger    = $('#hamburgermenu');
  var $rightmenu = $('#rightdrawer');
  var negwidth   = "-"+menuwidth+"px";
  var poswidth   = menuwidth+"px";

  $('#pgcontainer').on('click',function(e) {
    if(e.pageX < 130) {
      if($bdy.hasClass('openmenu')) {
        jsAnimateMenuLeft('close');
      } else {
        jsAnimateMenuLeft('open');
      }
    }
  });

  $('.overlay').on('click', function(e) {
    if($bdy.hasClass('openmenu')) {
      jsAnimateMenuLeft('close');
    }
    else if($bdy.hasClass('openmenur')) {
      jsAnimateMenuRight('close');
    }
  });

  $('a[href$="#"]').on('click', function(e) {
    e.preventDefault();
  });

  function jsAnimateMenuLeft(tog) {
    if(tog == 'open') {
      $bdy.addClass('openmenu');

      $container.animate({marginRight: negwidth, marginLeft: poswidth}, menuspeed);
      $hamburger.animate({width: poswidth}, menuspeed);
      $('.overlay').animate({left: poswidth}, menuspeed);
    }

    if(tog == 'close') {
      $bdy.removeClass('openmenu');

      $container.animate({marginRight: "0", marginLeft: "0"}, menuspeed);
      $hamburger.animate({width: "0"}, menuspeed);
      $('.overlay').animate({left: "0"}, menuspeed);
    }
  }
});