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.