0
所以我按下了按鈕，直到我添加了一個名爲'dark-blueright'的新塊區塊並將其定位在'淺藍色'下。Css按鈕在盤旋時沒有響應
/*
▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀█ ▒█▀▀▀ ▀▀█▀▀
░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀ ▒█▄▄▀ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀▀ ░▒█░░
▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█ ▒█▄▄▄ ▒█░▒█ ▒█▄▄▄ ▒█▄▄▄█ ▒█▄▄▄ ░▒█░░
*/
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 {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
/*
▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀ ▒█▀▀▀█ ▒█░▒█ ▒█▀▀▀ ▒█▀▀▀ ▀▀█▀▀
░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀ ░▒█░░
▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█ ▒█▄▄▄ ▒█▄▄▄█ ▒█░▒█ ▒█▄▄▄ ▒█▄▄▄ ░▒█░░
*/
@font-face {
\t font-family: headingf;
\t src: url(header-font.ttf); \t
}
@font-face {
\t font-family: mainf;
\t src: url(main-font.ttf); \t
}
@font-face {
\t font-family: iconf;
\t src: url(icon.ttf); \t
}
.background_colour {
\t background-color: #c6cdd1;
\t height: 1700px;
\t position: relative;
left: 0px;
top: 0px;
\t z-index: -2;
}
.iconsf {
\t font-family: iconf;
\t font-size: 40px;
\t text-indent: 40px;
\t float: left;
}
.light-blue {
\t width: 1000px;
\t height: 500px;
\t position: relative;
\t background-color: #68cef3;
}
.dark-blueright {
\t width: 1000px;
\t height: 1000px;
\t background-color: #00aae7;
\t position: absolute;
left: 0px;
top: 0px;
\t z-index: -1;
\t
}
.header-text {
\t font-family: headingf;
\t font-size: 170px;
\t position: inherit;
\t text-align: center;
\t top: 80px;
\t color: #ffffff;
\t letter-spacing: 10px
}
.welcome-text {
\t font-family: mainf;
\t font-size: 70px;
\t position: inherit;
\t text-align: center;
\t top: 60px;
\t color: #ffffff;
\t letter-spacing: 10px
}
.button-style1 {
\t position: relative;
\t top: 220px;
\t left: 400px;
\t background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00a9e7), color-stop(1, #00a9e7));
\t background:-moz-linear-gradient(center top, #00a9e7 5%, #00a9e7 100%);
\t filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a9e7', endColorstr='#00a9e7');
\t background-color:#00a9e7;
\t -webkit-border-top-left-radius:0px;
\t -moz-border-radius-topleft:0px;
\t border-top-left-radius:0px;
\t -webkit-border-top-right-radius:0px;
\t -moz-border-radius-topright:0px;
\t border-top-right-radius:0px;
\t -webkit-border-bottom-right-radius:0px;
\t -moz-border-radius-bottomright:0px;
\t border-bottom-right-radius:0px;
\t -webkit-border-bottom-left-radius:0px;
\t -moz-border-radius-bottomleft:0px;
\t border-bottom-left-radius:0px;
\t text-indent:-20px;
\t border:1px solid #ffffff;
\t display:inline-block;
\t color:#ffffff;
\t font-family:mainf;
\t font-size:15px;
\t font-weight:bold;
\t font-style:normal;
\t height:80px;
\t line-height:80px;
\t width:200px;
\t text-decoration:none;
\t text-align:center;
}
.button-style1:hover {
\t opacity: 0.6;
}
.button-style1:active {
\t opacity: 1;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
\t <div class="background_colour">
\t <div class="dark-blueright">
\t </div>
\t \t <div class="light-blue">
\t \t \t <div class="header-text">
\t \t \t Oh. Hello
\t \t \t </div>
\t \t \t <div class="welcome-text">
\t \t \t welcome
\t \t \t </div>
\t \t \t <a href="#" class="button-style1"><span class="iconsf">r</span>Goto art</a>
\t \t </div>
\t </div>
</body>
</html>
\t我想要的按鈕，鼠標懸停時改變透明度，它做到了。但我在CSS中的定位技巧很糟糕，找不到幫助研究。
又是什麼問題？ – 2015-02-08 16:20:34
目前還不清楚你在問什麼。懸停或定位時是否存在不透明問題？在你的問題中似乎還有更多的代碼比可能與問題相關。它真的有助於減少到一個[最小示例]（http://stackoverflow.com/help/mcve） – 2015-02-08 16:23:24
問題是，我如何使按鈕懸停功能的工作。它從'dark-blueright'的定位中被打破了， – Moorsy 2015-02-08 16:24:06