如何在懸停時更改屏幕區域的背景色

Question

我正在為一個學校項目制作一個網站，其中有左右抽屜。 抽屜是隱藏的，僅在onclick 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單擊它們將完全按照您的需要進行操作，因為click事件將冒泡到#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>