想要为多个跨度添加悬停效果

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">&nbsp;</span>
              <span class="hover">&nbsp;</span>
              <span class="hover">&nbsp;</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">&nbsp;</span>
              <span class="hover">&nbsp;</span>
              <span class="hover">&nbsp;</span>
            </div>
        </div>

【讨论】:

嘿,新问题:现在,一旦您单击按钮,它就会保持灰色并且不会变回黑色。但仅在手机上,在我的浏览器中完美运行,如果我使用 devtools,但是一旦我选择了某个手机,比如说 iphone 5,它就不再变黑了,知道这是为什么吗? 在某些手机上这是一个已知的悬停问题。看到这个thread。 谢谢你,很有帮助,不知道这是一个普遍的问题

以上是关于想要为多个跨度添加悬停效果的主要内容,如果未能解决你的问题,请参考以下文章

按钮悬停效果

React Bootstrap,为 NavItems 添加悬停效果

Woocommerce Storefront 为主页上的产品类别添加悬停效果

CSS:我可以为图像颜色更改悬停效果添加轻松过渡吗?

css 为Divi添加一个带有酷炫悬停效果的全宽图像网格。

css 为Divi添加一个带有酷炫悬停效果的全宽图像网格。