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

How to change the background color of a screen area on hover

本文关键字：屏幕 区域 背景色 悬停      更新时间：2023-09-26

我正在为一个学校项目制作一个网站，其中我有左抽屉和右抽屉。抽屉是隐藏的，只有在单击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);
    }
  }
});

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

请注意，由于.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>

相关文章：