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

Question

我正在为一个学校项目建立一个网站，其中我有左右抽屉。抽屉是隐藏的，仅在点击pageX < 100（左抽屉）和pageX > 1200（右抽屉）时显示。由于抽屉仅显示onclick()，我希望该区域以某种方式突出显示（最好是颜色变化），以便用户知道那里有东西。我该怎么做呢？

HTML：

  <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>

的JavaScript：

$(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);
    }
  }
});

Answer 1

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

请注意，由于.leftdrawer-hover和.rightdrawer-hover是#pgcontainer上的子项，因此点击它们会完全按照您的需要行事，因为点击事件会冒泡到#pgcontainer，您将在其中检测到他们并显示/隐藏相应的抽屉。

#pgcontainer .leftdrawer-hover,
#pgcontainer .rightdrawer-hover {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 130px;
    display: block;
    background: rgba(200, 200, 200, .4);
}
#pgcontainer .rightdrawer-hover {
    right: 0;
}
#pgcontainer .leftdrawer-hover:hover,
#pgcontainer .rightdrawer-hover:hover {
    background: rgba(0, 0, 0, .7);
    cursor: pointer;
}

<div id="pgcontainer">
    <div class="leftdrawer-hover"></div>
    <div class="rightdrawer-hover"></div>
    <!-- other tags -->    
</div>