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

Question

I am making a website for a school project, wherein I have left and right drawers. The drawers are hidden and show only when onclick pageX < 100 (left drawer) and pageX > 1200 (right drawer). As the drawers show only onclick() , I want that area to get highlighted in some way (preferably color-change) so that the user knows there is something there. How do I do this?

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

I think that the optimal solution here is to add two more elements, position them fixed and add some nice hover styles.

Note that since .leftdrawer-hover and .rightdrawer-hover are children on #pgcontainer clicking on them would act exactly as you need, because click events will bubble to #pgcontainer where you will detect them and show/hide corresponding drawer.

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