將鼠標懸停在CSS按鈕上沒有響應
[英]Css button doesn't respond when hovered over
問題描述
因此，我一直使用該按鈕，直到添加了一個名為“ dark-blueright”的新塊div並將其置於“ light-blue”下。
/* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀█ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀ ▒█▄▄▀ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█ ▒█▄▄▄ ▒█░▒█ ▒█▄▄▄ ▒█▄▄▄█ ▒█▄▄▄ ░▒█░░ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀ ▒█▀▀▀█ ▒█░▒█ ▒█▀▀▀ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█ ▒█▄▄▄ ▒█▄▄▄█ ▒█░▒█ ▒█▄▄▄ ▒█▄▄▄ ░▒█░░ */ @font-face { font-family: headingf; src: url(header-font.ttf); } @font-face { font-family: mainf; src: url(main-font.ttf); } @font-face { font-family: iconf; src: url(icon.ttf); } .background_colour { background-color: #c6cdd1; height: 1700px; position: relative; left: 0px; top: 0px; z-index: -2; } .iconsf { font-family: iconf; font-size: 40px; text-indent: 40px; float: left; } .light-blue { width: 1000px; height: 500px; position: relative; background-color: #68cef3; } .dark-blueright { width: 1000px; height: 1000px; background-color: #00aae7; position: absolute; left: 0px; top: 0px; z-index: -1; } .header-text { font-family: headingf; font-size: 170px; position: inherit; text-align: center; top: 80px; color: #ffffff; letter-spacing: 10px } .welcome-text { font-family: mainf; font-size: 70px; position: inherit; text-align: center; top: 60px; color: #ffffff; letter-spacing: 10px } .button-style1 { position: relative; top: 220px; left: 400px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00a9e7), color-stop(1, #00a9e7) ); background:-moz-linear-gradient( center top, #00a9e7 5%, #00a9e7 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a9e7', endColorstr='#00a9e7'); background-color:#00a9e7; -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px; border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -moz-border-radius-topright:0px; border-top-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; text-indent:-20px; border:1px solid #ffffff; display:inline-block; color:#ffffff; font-family:mainf; font-size:15px; font-weight:bold; font-style:normal; height:80px; line-height:80px; width:200px; text-decoration:none; text-align:center; } .button-style1:hover { opacity: 0.6; } .button-style1:active { opacity: 1; }
<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="background_colour"> <div class="dark-blueright"> </div> <div class="light-blue"> <div class="header-text"> Oh. Hello </div> <div class="welcome-text"> welcome </div> <a href="#" class="button-style1"><span class="iconsf">r</span>Goto art</a> </div> </div> </body> </html>
我希望按鈕在懸停時可以更改不透明度，它確實做到了。 但是我在CSS中的定位技能很糟糕，無法在研究中找到幫助。
1 個解決方案
解決方案1
0 已采納 2015-02-08 16:26:33
您在.background_colour類上的z索引是錯誤的，我已對此進行了更正，並且懸停效果現在正在起作用。
/* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀█ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀ ▒█▄▄▀ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█ ▒█▄▄▄ ▒█░▒█ ▒█▄▄▄ ▒█▄▄▄█ ▒█▄▄▄ ░▒█░░ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀ ▒█▀▀▀█ ▒█░▒█ ▒█▀▀▀ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█ ▒█▄▄▄ ▒█▄▄▄█ ▒█░▒█ ▒█▄▄▄ ▒█▄▄▄ ░▒█░░ */ @font-face { font-family: headingf; src: url(header-font.ttf); } @font-face { font-family: mainf; src: url(main-font.ttf); } @font-face { font-family: iconf; src: url(icon.ttf); } .background_colour { background-color: #c6cdd1; height: 1700px; position: relative; left: 0px; top: 0px; z-index: 0; } .iconsf { font-family: iconf; font-size: 40px; text-indent: 40px; float: left; } .light-blue { width: 1000px; height: 500px; position: relative; background-color: #68cef3; } .dark-blueright { width: 1000px; height: 1000px; background-color: #00aae7; position: absolute; left: 0px; top: 0px; z-index: -1; } .header-text { font-family: headingf; font-size: 170px; position: inherit; text-align: center; top: 80px; color: #ffffff; letter-spacing: 10px } .welcome-text { font-family: mainf; font-size: 70px; position: inherit; text-align: center; top: 60px; color: #ffffff; letter-spacing: 10px } .button-style1 { position: relative; top: 220px; left: 400px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00a9e7), color-stop(1, #00a9e7) ); background:-moz-linear-gradient( center top, #00a9e7 5%, #00a9e7 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a9e7', endColorstr='#00a9e7'); background-color:#00a9e7; -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px; border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -moz-border-radius-topright:0px; border-top-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; text-indent:-20px; border:1px solid #ffffff; display:inline-block; color:#ffffff; font-family:mainf; font-size:15px; font-weight:bold; font-style:normal; height:80px; line-height:80px; width:200px; text-decoration:none; text-align:center; } .button-style1:hover { opacity: 0.6; } .button-style1:active { opacity: 1; }
<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="background_colour"> <div class="dark-blueright"> </div> <div class="light-blue"> <div class="header-text"> Oh. Hello </div> <div class="welcome-text"> welcome </div> <a href="#" class="button-style1"><span class="iconsf">r</span>Goto art</a> </div> </div> </body> </html>
鼠標懸停時彈出的按鈕的css樣式問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.