span的CSS在我在容器的CSS上使用”background-color”时不能正常工作。

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

span's CSS doesn't work properly when I use "background-color" on container's CSS

问题

span标签的CSS在我使用"background-color"在容器的CSS上时无法正常工作。这段代码有效，但是当我取消注释时，结果失败了。有解决方案吗？

  1. <div class="areaButtons">        
  2.     <div class="buttonX">
  3.         <a href="#"><span></span>Button X</a>
  4.     </div>
  5. </div>
  1. .buttonX{
  2.     height:100vh;
  3.     display:flex;
  4.     justify-content:center;
  5.     align-items:center;
  6.     /* background-color: #807b7b; */ 
  7. }

你可以在以下链接查看所有的代码：https://codepen.io/aphroditef/pen/RwqQoYa

英文:

span's CSS doesn't work properly when I use "background-color" on container's CSS. This code works, but when I uncomment the result fails. Any solution?

  1. &lt;div class=&quot;areaButtons&quot;&gt;        
  2.         &lt;div class=&quot;buttonX&quot;&gt;
  3.             &lt;a href=&quot;#&quot;&gt;&lt;span&gt;&lt;/span&gt;Button X&lt;/a&gt;
  4.         &lt;/div&gt;
  5.     &lt;/div&gt;  
  3. .buttonX{
  4.     height:100vh;
  5.     display:flex;
  6.     justify-content:center;
  7.     align-items:center;
  8.     /* background-color: #807b7b; */ 
  9. }

You can see all the code on the link https://codepen.io/aphroditef/pen/RwqQoYa

答案1

得分: 0

问题出在z-index上。
在.buttonX a:before, .buttonX a:after {上的z-index: -1;将展开区域放在了background-color的后面。

在下面的片段中，我做了一些调整，具体如下：

  • 将按钮文本放在自己的span中。
  • 在a标签内的span上添加了类，以便更容易区分它们。
  1. .buttonX {
  2.   height: 100vh;
  3.   display: flex;
  4.   justify-content: center;
  5.   align-items: center;
  6.   background-color: #807b7b;
  7. }
  9. .buttonX a {
  10.   width: 220px;
  11.   height: 80px;
  12.   text-decoration: none;
  13.   text-align: center;
  14.   line-height: 80px;
  15.   transition: all 0.5s;
  16.   position: relative;
  17. }
  19. .buttonX a span.text {
  20.   text-transform: uppercase;
  21.   color: #f2dc82;
  22.   /*background-color: transparent;*/
  23.   font-family: 'roboto';
  24.   font-size: 26px;
  25.   z-index: 1;
  26.   position: relative;
  27. }
  29. .buttonX a:before,
  30. .buttonX a:after {
  31.   content: '';
  32.   position: absolute;
  33.   top: 50%;
  34.   width: 20px;
  35.   height: 20px;
  36.   background-color: #f2dc82;
  37.   border-radius: 50%;
  38.   transform: translateY(-50%);
  39.   transition: all 0.3s;
  40.   opacity: 0;
  41. }
  43. .buttonX a:before {
  44.   left: 0;
  45.   box-shadow: -100px 0 0 #94864f;
  46. }
  48. .buttonX a:after {
  49.   right: 0;
  50.   box-shadow: 100px 0 0 #94864f;
  51. }
  53. .buttonX a:hover:before {
  54.   left: 50%;
  55.   box-shadow: 30px 0 0 #f2dc82;
  56.   transform: translateX(-50%) translateY(-50%);
  57.   opacity: 1;
  58. }
  60. .buttonX a:hover:after {
  61.   right: 50%;
  62.   box-shadow: -30px 0 0 #f2dc82;
  63.   transform: translateX(50%) translateY(-50%);
  64.   opacity: 1;
  65. }
  67. .buttonX span.other {
  68.   position: absolute;
  69.   top: 0;
  70.   left: 0;
  71.   width: 100%;
  72.   height: 100%;
  73.   background-color: #f2dc82;
  74.   border-radius: 8px;
  75.   transform: scale(0);
  76.   transition: all 0.3s;
  77. }
  79. .buttonX a:hover span.other {
  80.   transform: scale(1);
  81.   transition-delay: 0.4s;
  82. }
  84. .buttonX a:hover span.text {
  85.   color: #1a84f5;
  86.   transition-delay: 0.4s;
  87. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
  10.   <link rel="stylesheet" href="mystyle.css">
  11. </head>
  13. <body>
  14.   <div class="areaButtons">
  15.     <div class="buttonX">
  16.       <a href="#">
  17.         <span class="other"></span>
  18.         <span class="text">Button X<span>
  19.       </a>
  20.     </div>
  21.   </div>
  22. </body>
  24. </html>
英文:

The issue is because of z-index.
Your z-index:-1; on .buttonX a:before, .buttonX a:after { put the expanding region behind the background-color

In the below snippet I've moved a few things around. Namely:

  • Putting the button text in it's own span
  • Added classes to the spans inside the a tag so we can more easily differentiate between them

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .buttonX {
  2. height: 100vh;
  3. display: flex;
  4. justify-content: center;
  5. align-items: center;
  6. background-color: #807b7b;
  7. }
  8. .buttonX a {
  9. width: 220px;
  10. height: 80px;
  11. text-decoration: none;
  12. text-align: center;
  13. line-height: 80px;
  14. transition: all 0.5s;
  15. position: relative;
  16. }
  17. .buttonX a span.text {
  18. text-transform: uppercase;
  19. color: #f2dc82;
  20. /*background-color: transparent;*/
  21. font-family: &#39;roboto&#39;;
  22. font-size: 26px;
  23. z-index: 1;
  24. position: relative;
  25. }
  26. .buttonX a:before,
  27. .buttonX a:after {
  28. content: &#39;&#39;;
  29. position: absolute;
  30. top: 50%;
  31. width: 20px;
  32. height: 20px;
  33. background-color: #f2dc82;
  34. border-radius: 50%;
  35. transform: translateY(-50%);
  36. transition: all 0.3s;
  37. opacity: 0;
  38. }
  39. .buttonX a:before {
  40. left: 0;
  41. box-shadow: -100px 0 0 #94864f;
  42. }
  43. .buttonX a:after {
  44. right: 0;
  45. box-shadow: 100px 0 0 #94864f;
  46. }
  47. .buttonX a:hover:before {
  48. left: 50%;
  49. box-shadow: 30px 0 0 #f2dc82;
  50. transform: translateX(-50%) translateY(-50%);
  51. opacity: 1;
  52. }
  53. .buttonX a:hover:after {
  54. right: 50%;
  55. box-shadow: -30px 0 0 #f2dc82;
  56. transform: translateX(50%) translateY(-50%);
  57. opacity: 1;
  58. }
  59. .buttonX span.other {
  60. position: absolute;
  61. top: 0;
  62. left: 0;
  63. width: 100%;
  64. height: 100%;
  65. background-color: #f2dc82;
  66. border-radius: 8px;
  67. transform: scale(0);
  68. transition: all 0.3s;
  69. }
  70. .buttonX a:hover span.other {
  71. transform: scale(1);
  72. transition-delay: 0.4s;
  73. }
  74. .buttonX a:hover span.text {
  75. color: #1a84f5;
  76. transition-delay: 0.4s;
  77. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;title&gt;Document&lt;/title&gt;
  7. &lt;link href=&#39;https://fonts.googleapis.com/css?family=Roboto&#39; rel=&#39;stylesheet&#39;&gt;
  8. &lt;link rel=&quot;stylesheet&quot; href=&quot;mystyle.css&quot;&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;div class=&quot;areaButtons&quot;&gt;
  12. &lt;div class=&quot;buttonX&quot;&gt;
  13. &lt;a href=&quot;#&quot;&gt;
  14. &lt;span class=&quot;other&quot;&gt;&lt;/span&gt;
  15. &lt;span class=&quot;text&quot;&gt;Button X&lt;span&gt;
  16. &lt;/a&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;
  19. &lt;/body&gt;
  20. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月13日 23:05:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76680888.html
  • css
  • html
匿名

发表评论

匿名网友

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

确定