个人中心
gpt4 book ai didi

javascript - 框阴影悬停在跨度元素上

转载 作者：行者123 更新时间：2023-11-28 04:25:49 26 4
gpt4 key购买 nike

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

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

最佳答案

所以，如果我理解正确的话:您希望菜单处于事件状态时阴影不重叠？您可以在 menuToggle 上使用 filter: dropshadow()。请注意，我删除了悬停的 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>

关于javascript - 框阴影悬停在跨度元素上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45075361/

26 4 0
文章推荐： javascript - 在 Angular JS 中查找具有特定类的下一个元素
文章推荐： javascript - Google Chrome 扩展包括 Jquery 和另一个自定义 javascript 文件
文章推荐： javascript - 过渡时间不一样
文章推荐： javascript - 如何在 Angular 2 中填充 p-dataTable？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com