<tfoot id='dqhIs'></tfoot>
  1. <small id='dqhIs'></small><noframes id='dqhIs'>

      <bdo id='dqhIs'></bdo><ul id='dqhIs'></ul>

    1. <i id='dqhIs'><tr id='dqhIs'><dt id='dqhIs'><q id='dqhIs'><span id='dqhIs'><b id='dqhIs'><form id='dqhIs'><ins id='dqhIs'></ins><ul id='dqhIs'></ul><sub id='dqhIs'></sub></form><legend id='dqhIs'></legend><bdo id='dqhIs'><pre id='dqhIs'><center id='dqhIs'></center></pre></bdo></b><th id='dqhIs'></th></span></q></dt></tr></i><div id='dqhIs'><tfoot id='dqhIs'></tfoot><dl id='dqhIs'><fieldset id='dqhIs'></fieldset></dl></div>
      <legend id='dqhIs'><style id='dqhIs'><dir id='dqhIs'><q id='dqhIs'></q></dir></style></legend>

      悬停时背景颜色的渐变按钮闪烁

      时间:2023-11-30

      1. <legend id='dzau5'><style id='dzau5'><dir id='dzau5'><q id='dzau5'></q></dir></style></legend>

      2. <small id='dzau5'></small><noframes id='dzau5'>

        1. <tfoot id='dzau5'></tfoot>
          <i id='dzau5'><tr id='dzau5'><dt id='dzau5'><q id='dzau5'><span id='dzau5'><b id='dzau5'><form id='dzau5'><ins id='dzau5'></ins><ul id='dzau5'></ul><sub id='dzau5'></sub></form><legend id='dzau5'></legend><bdo id='dzau5'><pre id='dzau5'><center id='dzau5'></center></pre></bdo></b><th id='dzau5'></th></span></q></dt></tr></i><div id='dzau5'><tfoot id='dzau5'></tfoot><dl id='dzau5'><fieldset id='dzau5'></fieldset></dl></div>
            <bdo id='dzau5'></bdo><ul id='dzau5'></ul>
              <tbody id='dzau5'></tbody>
              • 本文介绍了悬停时背景颜色的渐变按钮闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                问题描述

                正如您在以下代码段中所见,我有一个带有线性渐变背景的按钮.在悬停中,我想将其更改为单一颜色.当我尝试这种效果时,我得到了一种背景消失然后背景颜色出现的闪烁效果.是否有任何解决方法可以防止这种闪烁效果?

                As you can see in the following snippet I have a button with a linear gradient background. In the hover I want change it to a single color. When I try this effect I am getting like a blink effect which the background disappears and then the background color appears. Is there any workarounds to prevent this blinking effect?

                a {
                  text-transform: uppercase;
                  background-color: transparent;
                  border-radius: 3px;
                  padding: 5px 20px;
                  -ms-transition: all .4s ease-in-out;
                  -moz-transition: all .4s ease-in-out;
                  -o-transition: all .4s ease-in-out;
                  -webkit-transition: all .4s ease-in-out;
                  transition: all .4s ease-in-out;
                  background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
                  border: none;
                  outline: none;
                }
                
                a:hover {
                  background-image: none;
                  background-color: #33afbd;
                }

                <a href="#">Button</a>

                推荐答案

                我只使用了 background 那些.并使用 background:linear-gradient(#33afbd,#33afbd); 代替 background-color:#33afbd;

                I used only background for those. And used background:linear-gradient(#33afbd,#33afbd); instead of background-color:#33afbd;

                a {
                  text-transform: uppercase;
                  border-radius: 3px;
                  padding: 5px 20px;
                  -ms-transition: all .4s ease-in-out;
                  -moz-transition: all .4s ease-in-out;
                  -o-transition: all .4s ease-in-out;
                  -webkit-transition: all .4s ease-in-out;
                  transition: all .4s ease-in-out;
                  background: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
                  border: none;
                  outline: none;
                }
                
                a:hover {
                  background:linear-gradient(#33afbd,#33afbd);
                }

                <a href="#">Button</a>

                这篇关于悬停时背景颜色的渐变按钮闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                上一篇:如何使悬停在活动按钮上不使用悬停效果? 下一篇:如何更改选择中悬停选项的背景颜色和文本?

                相关文章

              • <i id='2ivMI'><tr id='2ivMI'><dt id='2ivMI'><q id='2ivMI'><span id='2ivMI'><b id='2ivMI'><form id='2ivMI'><ins id='2ivMI'></ins><ul id='2ivMI'></ul><sub id='2ivMI'></sub></form><legend id='2ivMI'></legend><bdo id='2ivMI'><pre id='2ivMI'><center id='2ivMI'></center></pre></bdo></b><th id='2ivMI'></th></span></q></dt></tr></i><div id='2ivMI'><tfoot id='2ivMI'></tfoot><dl id='2ivMI'><fieldset id='2ivMI'></fieldset></dl></div>
                <legend id='2ivMI'><style id='2ivMI'><dir id='2ivMI'><q id='2ivMI'></q></dir></style></legend>

                  <small id='2ivMI'></small><noframes id='2ivMI'>

                    • <bdo id='2ivMI'></bdo><ul id='2ivMI'></ul>
                    <tfoot id='2ivMI'></tfoot>