Question

我的汉堡菜单中有3个span元素，一切正常但只有中间元素的CSS box-shadow没有显示在按钮上，与其他元素重叠。也许有人可以帮我解决这个简单的问题。谢谢！

$(document).ready(function () {
	/* hamburger menu */
	$('.menuToggle').hover(function () {
		$('.menuToggle span').toggleClass('spanWithShadow');
		$(this).toggleClass('menuTransform');
		$(this).click(function () {
			var $this = $(this);
			if ($this.hasClass('active')) {
				$this.removeClass('active');
			}
			else {
				$this.addClass('active');
			}
		});
	});
});

html,body {
   height: 100%;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
}

body {
	 background-color: rgba(41.5%, 53.7%, 95.5%,0.17);
}

 @font-face {
  font-family: Arial, Helvetica, sans-serif;

}

.header {
 height: 74.64px;
 display: flex;
 max-width: 1200px;
 margin: 0 auto;
 font-size: 1.8em;
 text-align: center;
}

/*Hamburger menu*/
.menuToggle {
  cursor: pointer;
  display: flex;
  width:  52.654px;
  height: 52.654px;
  position: relative;
  padding: 18.66px 0 0 10.66px;
}

.menuToggle span {
  display: block;
  height: 0.4rem;
  position: absolute;
  width: 3rem;
  -webkit-transition: margin .3s ease-in-out, width .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.menuToggle span:nth-child(2) {
  margin-top: 0.9rem;
}

.menuToggle span:nth-child(3) {
  margin-top: 1.8rem;
}

.menuToggle.active span:nth-child(odd) {
  margin-left: 1.5rem;
  width: 1.5rem;
}

.menuToggle.active span:nth-child(1) {
  margin-top: 0.6rem;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  z-index: 0;
}

.menuToggle.active span:nth-child(3) {
  margin-top: 1.3rem;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  z-index: 0;
}

.menuToggle span {
  background-color: rgba(17.3%, 24.3%, 31.4%, 0.9);
  border-radius: 5px;
}

.menuToggle.active span {
  background-color: rgba(17.3%, 24.3%, 31.4%, 0.9);
  z-index: 1;
}

.spanWithShadow{
   -moz-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.6),0px 0px 4px 4px rgba(255,255,255,0.6);
   -webkit-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.6),0px 0px 4px 4px rgba(255,255,255,0.6);
   box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.6),0px 0px 4px 4px rgba(255,255,255,0.6);
}

.menuTransform {
   transform: scale(1.07);
  -webkit-transform: scale(1.07);
  -moz-transform: scale(1.07);
}

<body>
  <header>
    <div class="header">
      <div class="menuToggle">
        <span></span>
        <span></span>
        <span></span>
      </div>
  </header>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Answer 1

所以，如果我理解你的正确：你希望当菜单处于活动状态时阴影不重叠？您可以在filter: dropshadow()上使用menuToggle。请注意，我删除了悬停的js并将其移至css，例如.menuToggle:hover和.menuToggle:hover span

不幸的是，如果你在浅色背景上使用白色，它就有点“弱”，它不会真的很明显。这就是我为你的标题添加背景颜色的原因。

$(document).ready(function () {
	/* hamburger menu */
	$('.menuToggle').click(function () {
			var $this = $(this);
			if ($this.hasClass('active')) {
				$this.removeClass('active');
			}
			else {
				$this.addClass('active');
			}
    	});
});

html,body {
   height: 100%;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
}

body {
 background-color: rgba(41.5%, 53.7%, 95.5%,0.17);
}

 @font-face {
  font-family: Arial, Helvetica, sans-serif;

}

.header {
   height: 74.64px;
   display: flex;
   max-width: 1200px;
   margin: 0 auto;
   font-size: 1.8em;
   text-align: center;
   background: gray;
}

/*Hamburger menu*/
.menuToggle {
  cursor: pointer;
  display: flex;
  width:  52.654px;
  height: 52.654px;
  background: transparent;
  position: relative;
  padding: 18.66px 0 0 10.66px;
}
.menuToggle:hover {
   filter: drop-shadow(0px 0px 4px rgb(255, 255, 255));
   transform: scale(1.07);
  -webkit-transform: scale(1.07);
  -moz-transform: scale(1.07);
}
.menuToggle span {
  display: block;
  height: 0.4rem;
  position: absolute;
  width: 3rem;
  background-color: rgba(17.3%, 24.3%, 31.4%, 0.9);
  border-radius: 5px;
  -webkit-transition: margin .3s ease-in-out, width .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, transform .3s ease-in-out;
  transition: margin .3s ease-in-out, width .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.menuToggle span:nth-child(2) {
  margin-top: 0.9rem;
}

.menuToggle span:nth-child(3) {
  margin-top: 1.8rem;
}

.menuToggle.active span:nth-child(odd) {
  margin-left: 1.5rem;
  width: 1.5rem;
  z-index: 1;
}


.menuToggle.active span:nth-child(1) {
  margin-top: 0.6rem;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
 }

.menuToggle.active span:nth-child(3) {
  margin-top: 1.3rem;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

<body>
  <header>
    <div class="header">
      <div class="menuToggle">
        <span></span>
        <span></span>
        <span></span>
      </div>
  </header>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

将阴影悬停在范围元素

1 个答案: