想要为多个跨度添加悬停效果
Posted
技术标签:
【中文标题】想要为多个跨度添加悬停效果【英文标题】:Want to add hover effect to multiple spans 【发布时间】:2018-01-05 17:03:49 【问题描述】:嘿嘿,
我制作了一个汉堡菜单图标,我希望当您将鼠标悬停在它上面时它会改变颜色,但不知何故它不起作用,我不明白为什么。 我有这 3 个跨度,当单击菜单时它们变成了两个,并且我让悬停效果单独为每个跨度工作,但我希望所有跨度一次改变颜色。
$(document).ready(function()
$("#burger-container").on('click', function()
$(this).toggleClass("open");
);
);
#burger-container
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
#burger
cursor: pointer;
display: block;
width: 50px;
height: 50px;
#burger span
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
#burger-container.open span:nth-child(2)
width: 0;
opacity: 0;
#burger-container.open span:nth-child(3)
transform: rotate(45deg);
top: -13px;
#burger-container.open span:nth-child(1)
transform: rotate(-45deg);
top: 13px;
span.hover:hover
background: #666666;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="burger-container">
<div id="burger">
<span class="hover"> </span>
<span class="hover"> </span>
<span class="hover"> </span>
</div>
</div>
【问题讨论】:
【参考方案1】:您应该更改 .hover
跨度的颜色,当它们的父级 #burger:hover
悬停时:
#burger:hover .hover
background: #666666;
$(document).ready(function()
$("#burger-container").on('click', function()
$(this).toggleClass("open");
);
);
#burger-container
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
#burger
cursor: pointer;
display: block;
width: 50px;
height: 50px;
#burger span
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
#burger-container.open span:nth-child(2)
width: 0;
opacity: 0;
#burger-container.open span:nth-child(3)
transform: rotate(45deg);
top: -13px;
#burger-container.open span:nth-child(1)
transform: rotate(-45deg);
top: 13px;
#burger:hover .hover
background: #666666;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="burger-container">
<div id="burger">
<span class="hover"> </span>
<span class="hover"> </span>
<span class="hover"> </span>
</div>
</div>
【讨论】:
嘿,新问题:现在,一旦您单击按钮,它就会保持灰色并且不会变回黑色。但仅在手机上,在我的浏览器中完美运行,如果我使用 devtools,但是一旦我选择了某个手机,比如说 iphone 5,它就不再变黑了,知道这是为什么吗? 在某些手机上这是一个已知的悬停问题。看到这个thread。 谢谢你,很有帮助,不知道这是一个普遍的问题以上是关于想要为多个跨度添加悬停效果的主要内容,如果未能解决你的问题,请参考以下文章
React Bootstrap,为 NavItems 添加悬停效果