移动设备中CSS悬停下划线消失

huangapple
go评论115阅读模式
英文:

CSS hover underline disappears in mobile

问题

I have a button that gets underlined on hover. It works fine on desktop, but the underline is never visible when on mobile. What can I do to fix it?

Codepen of button working correctly

Gif of how underline disappears on mobile

Interestingly if you view the codepen in mobile mode, the underline also disappears.

html

  1. <button id="google" class="button" onclick="window.location.href='https://www.google.com/;'>
  2.   <span id="github" class="hover-underline-animation">Google</span>
  3.   <svg viewBox="0 0 46 16" xmlns="http://www.w3.org/2000/svg" id="arrow-horizontal">
  4.     <path fill="currentColor" transform="translate(30)" d="M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z" data-name="Path 10" id="Path_10"></path>
  5.   </svg>
  6. </button>

css

  1. .button {
  2.     border: none;
  3.     background: none;
  4.     margin-top: 9.5vh;
  5.     cursor: pointer;
  6. }
  8. /* Button text */
  9. .button span {
  10.     letter-spacing: 0.2em;
  11.     font-size: 1.1vw;
  12.     font-weight: 500;
  13.     /* Padding at end of button text */
  14.     padding-right: 0.8vw;
  15.     text-transform: uppercase;
  16. }
  18. /* Button arrow */
  19. .button svg {
  20.     height: 0;
  21.     width: 0;
  22. /*     transform: translateX(-0.6em);
  23.     transition: all 0.3s ease; */
  24. }
  26. .button:hover svg {
  27.     transform: translateX(0);
  28. }
  30. .button:active svg {
  31.     transform: scale(0.9);
  32. }
  34. /* Underline animation on hover */
  35. .hover-underline-animation {
  36.     position: relative;
  37.     /* Padding from button text */
  38.     padding-bottom: 0.5em;
  39. }
  41. .hover-underline-animation:after {
  42.     content: '';
  43.     position: absolute;
  44.     width: 85%;
  45.     transform: scaleX(0);
  46.     /* Thickness of underline */
  47.     height: 0.15em;
  48.     bottom: 0;
  49.     left: 0;
  50.     transform-origin: bottom right;
  51.     transition: transform 0.25s ease-out;
  52.     background-color: black;
  53. }
  55. .button:hover .hover-underline-animation:after {
  56.     transform: scaleX(1);
  57.     transform-origin: bottom left;
  58. }

I tried playing around with the CSS. If I change scaleX from 0 to 1 in .hover-underline-animation:after, it becomes visible. So I know the underline does exist. But the hover just doesn't play in mobile.

英文:

I have a button that gets underlined on hover. It works fine on desktop, but the underline is never visible when on mobile. What can I do to fix it?

Codepen of button working correctly

Gif of how underline disappears on mobile

Interestingly if you view the codepen in mobile mode, the underline also disappears.

html

  1. &lt;button id=&quot;google&quot; class=&quot;button&quot; onclick=&quot;window.location.href=&#39;https://www.google.com/;&quot;&gt;
  2.   &lt;span id=&quot;github&quot; class=&quot;hover-underline-animation&quot;&gt;Google&lt;/span&gt;
  3.   &lt;svg viewBox=&quot;0 0 46 16&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; id=&quot;arrow-horizontal&quot;&gt;
  4.     &lt;path fill=&quot;currentColor&quot; transform=&quot;translate(30)&quot; d=&quot;M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z&quot; data-name=&quot;Path 10&quot; id=&quot;Path_10&quot;&gt;&lt;/path&gt;
  5.   &lt;/svg&gt;
  6. &lt;/button&gt;

css

  1. .button {
  2.     border: none;
  3.     background: none;
  4.     margin-top: 9.5vh;
  5.     cursor: pointer;
  6. }
  8. /* Button text */
  9. .button span {
  10.     letter-spacing: 0.2em;
  11.     font-size: 1.1vw;
  12.     font-weight: 500;
  13.     /* Padding at end of button text */
  14.     padding-right: 0.8vw;
  15.     text-transform: uppercase;
  16. }
  18. /* Button arrow */
  19. .button svg {
  20.     height: 0;
  21.     width: 0;
  22. /*     transform: translateX(-0.6em);
  23.     transition: all 0.3s ease; */
  24. }
  26. .button:hover svg {
  27.     transform: translateX(0);
  28. }
  30. .button:active svg {
  31.     transform: scale(0.9);
  32. }
  34. /* Underline animation on hover */
  35. .hover-underline-animation {
  36.     position: relative;
  37.     /* Padding from button text */
  38.     padding-bottom: 0.5em;
  39. }
  41. .hover-underline-animation:after {
  42.     content: &#39;&#39;;
  43.     position: absolute;
  44.     width: 85%;
  45.     transform: scaleX(0);
  46.     /* Thickness of underline */
  47.     height: 0.15em;
  48.     bottom: 0;
  49.     left: 0;
  50.     transform-origin: bottom right;
  51.     transition: transform 0.25s ease-out;
  52.     background-color: black;
  53. }
  55. .button:hover .hover-underline-animation:after {
  56.     transform: scaleX(1);
  57.     transform-origin: bottom left;
  58. }

I tried playing around with the CSS. If I change scaleX from 0 to 1 in .hover-underline-animation:after, it becomes visible. So I know the underline does exist. But the hover just doesn't play in mobile.

答案1

得分: 2

"hover"在移动设备上不存在。从历史上看，数字化设备无法区分人的手指触碰设备屏幕和悬停在其上。 – Heretic Monkey

英文:

> There is no "hover" in mobile. Historically, digitizers could not
> differentiate between a person's finger touching the device's screen
> and hovering over it. – Heretic Monkey

huangapple
  • 本文由 发表于 2023年6月8日 05:26:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76427215.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定