CSS hover 按钮效果 - z 索引和文本颜色问题
[英]CSS hover button effect- issue with z index and text colour
问题描述
我正在尝试在锚元素上创建效果，以便当它悬停在按钮上时会亮起并具有充满活力的灯光效果。
我希望效果起作用的按钮是“捐赠”按钮。 我几乎达到了预期的效果，但是，当按钮悬停时，它会亮起，然后文本变得不可读。
.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* testing new code from here */.container a { position: relative; display: inline-block; padding: 15px 30px; border: 2px solid #0f0; text-decoration: none; font-weight: 650; color: #fff; margin: 5px; letter-spacing: 0.45px; -webkit-box-reflect: below 0px linear-gradient(transparent, #0002); transition: 0.5s; transition-delay: 0s; }.container a:hover { color: #000; }.container a span { position: relative; z-index: 100; }.container a::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #0f0; box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; transition-delay: 1s, 0.5s, 0s, 0s; }.container a:hover::before { width: 60%; height: 100%; left: -2px; box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0; transition-delay: 0s, 0.5s, 1s, 1s; }.container a::after { content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #0f0; box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; transition-delay: 1s, 0.5s, 0s, 0s; }.container a:hover::after { width: 60%; height: 100%; right: -2px; box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0; transition-delay: 0s, 0.5s, 1s, 1s; color: #000; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <link href="index.css" rel="stylesheet" /> </head> <body> <div class="header-container"> <header class="main-header"> <h1 class="logo">Animal Charity</h1> <nav class="nav-links"> <a class="menu-link1" href="">About us</a> <a class="menu-link2" href="">Our Work</a> <a class="menu-link3" href="">Success Stories</a> <a class="menu-link4" href="">Shop</a> <a class="menu-link5" href="">Contact us</a> <div class="container"> <a class="donate" href="">Donate</a> </div> </nav> </header> </div> </body> <footer></footer> </html>
我认为这是 z 索引的问题的原因是，当我将它设置为 100 时，这应该因此将文本带回前面，但是，正如我所提到的，它不会从框阴影的绿色后面显示出来，即使我将文本颜色设置为黑色。 任何建议或帮助将不胜感激。 谢谢
2 个解决方案
解决方案1
0 2022-08-30 16:13:52
您可以将按钮文本包装成例如span和 position 它：
body {background:grey}.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* testing new code from here */.container a { position: relative; display: inline-block; padding: 15px 30px; border: 2px solid #0f0; text-decoration: none; font-weight: 650; color: #fff; margin: 5px; letter-spacing: 0.45px; -webkit-box-reflect: below 0px linear-gradient(transparent, #0002); transition: 0.5s; transition-delay: 0s; }.container a span {position:relative; z-index:1;}.container a:hover { color: #000; }.container a span { position: relative; z-index: 100; }.container a::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #0f0; box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; transition-delay: 1s, 0.5s, 0s, 0s; }.container a:hover::before { width: 60%; height: 100%; left: -2px; box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0; transition-delay: 0s, 0.5s, 1s, 1s; }.container a::after { content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #0f0; box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; transition-delay: 1s, 0.5s, 0s, 0s; }.container a:hover::after { width: 60%; height: 100%; right: -2px; box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0; transition-delay: 0s, 0.5s, 1s, 1s; color: #000; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <link href="index.css" rel="stylesheet" /> </head> <body> <div class="header-container"> <header class="main-header"> <h1 class="logo">Animal Charity</h1> <nav class="nav-links"> <a class="menu-link1" href="">About us</a> <a class="menu-link2" href="">Our Work</a> <a class="menu-link3" href="">Success Stories</a> <a class="menu-link4" href="">Shop</a> <a class="menu-link5" href="">Contact us</a> <div class="container"> <a class="donate" href=""><span>Donate</span></a> </div> </nav> </header> </div> </body> <footer></footer> </html>
解决方案2
-1 2022-08-30 16:25:54
.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* testing new code from here */.container a { position: relative; display: inline-block; padding: 15px 30px; border: 2px solid #0f0; text-decoration: none; font-weight: 650; color: #fff; margin: 5px; letter-spacing: 0.45px; -webkit-box-reflect: below 0px linear-gradient(transparent, #0002); transition: 0.5s; transition-delay: 0s; }.container a:hover { color: #000; }.container a span { position: relative; z-index: 100; }.container a::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #0f0; box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; transition-delay: 1s, 0.5s, 0s, 0s; z-index: -1; }.container a:hover::before { width: 60%; height: 100%; left: -2px; box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0; transition-delay: 0s, 0.5s, 1s, 1s; }.container a::after { content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #0f0; box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; transition-delay: 1s, 0.5s, 0s, 0s; z-index: -1; }.container a:hover::after { width: 60%; height: 100%; right: -2px; box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0; transition-delay: 0s, 0.5s, 1s, 1s; color: #000; } <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <div class="header-container"> <header class="main-header"> <h1 class="logo">Animal Charity</h1> <nav class="nav-links"> <a class="menu-link1" href="">About us</a> <a class="menu-link2" href="">Our Work</a> <a class="menu-link3" href="">Success Stories</a> <a class="menu-link4" href="">Shop</a> <a class="menu-link5" href="">Contact us</a> <div class="container"> <a class="donate" href="">Donate</a> </div> </nav> </header> </div> </body> </html>
CSS / Javascript-按钮和链接未检测到悬停或单击？ 即使Z指数最高？
[英]CSS/Javascript - button and link not detecting hover or click? Even with z index highest?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.