我正在尝试创建这个按钮esque的东西,它是一个白色的h1,里面有一个带有5px白色边框的链接,我希望整个东西充当链接,包括边框。我设法让所有过渡都正确但是由于边界和实际链接在某种程度上是单独的鼠标悬停时它不会影响链接文本并且单击它不会带你到任何地方。
这是我的代码:
body, html{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
ul a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #f5f5f5;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
font-size: 26px;
z-index:
}
ul a:hover,
ul a:focus {
outline: none;
z-index:
}
ul {
display: flex;
align-items: center;
margin: 0 auto;
padding: 0;
text-align: center;
height: 10%;
width: 35%;
position: absolute;
top: 7%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
ul li {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
li {
flex: 1;
font-weight: 200;
font-family: 'Oswald', sans-serif;
font-size: 18pt;
}
li a {
outline: none;
padding: 8px 0;
}
li a::after {
outline: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #eb4f43;
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
li a:hover::after,
li a:focus::after {
outline: none;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.logo {
margin-top: 1.75%;
height: 50%;
width: 50%;
}
.i1, .i2, .i3 {
display: flex;
height: 100%;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}
.i2 {
background-color: #333;
}
#ptitle {
display: flex;
font-weight: 500;
font-family: 'Oswald', sans-serif;
color: #f5f5f5;
margin: 0 auto;
padding: 0;
align-items: center;
position: absolute;
top: 45%;
left: 50%;
}
#prole {
display: flex;
font-weight: 200;
font-family: 'Oswald', sans-serif;
color: #f5f5f5;
margin: 0 auto;
padding: 0;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
}
h1 a {
text-decoration: none;
outline: none;
color: #f5f5f5;
font-size: 28pt;
}
.plink a,
.plink {
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
.plink a:hover::before,
.plink a:focus::before {
color: #f5f5f5;
}
.plink a:hover,
.plink a:focus,
.plink:hover,
.plink:focus {
color: #eb4f43;
}
.plink:hover,
.plink:focus {
border: 4px #eb4f43 solid;
}
.plink {
display: flex;
font-weight: 200;
font-family: 'Oswald', sans-serif;
margin: 0 auto;
padding: 0;
align-items: center;
position: absolute;
top: 46.1%;
left: 15%;
border: 4px #f5f5f5 solid;
padding-left: 2%;
padding-right: 2%;
padding-top: 0.8%;
padding-bottom: 1%;
}
<html>
<body>
<div class="header">
<ul>
<li><a id="navlink" href="#">PROJECTS</a></li>
<li><a id="navlink" href="#">CLIENTS</a></li>
<li><img class="logo" src="logo.png" href="logo.png"></li>
<li><a id="navlink" href="#">ABOUT</a></li>
<li><a id="navlink" href="#">CONTACT</a></li>
</ul>
</div>
<div class="i1">
<div>
<h1 class="plink"><a href="#">LEARN MORE</a></h1>
<h1 id="ptitle">PROJECT: MOVIES</h1>
<h1 id="prole">UI/UX</h1>
</div>
<div class="image">
<img src="http://thechangingperspectiveblog.com/wp-content/uploads/2010/11/MOUNTAINS-4-of-11.jpg">
</div>
</div>
</body>
</html>
以下是我认为搞砸的部分:
.plink a,
.plink {
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
.plink a:hover::before,
.plink a:focus::before {
color: #f5f5f5;
}
.plink a:hover,
.plink a:focus,
.plink:hover,
.plink:focus {
color: #eb4f43;
}
.plink:hover,
.plink:focus {
border: 4px #eb4f43 solid;
}
这是关于LEARN MORE“按钮”
答案 0 :(得分:0)
您应该将所有样式放在.plink a
上,并避免将样式放在.plink
上。
h1 a {
text-decoration: none;
outline: none;
color: #f5f5f5;
font-size: 28pt;
}
.plink a {
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
border: 4px #f5f5f5 solid;
}
.plink a:hover::before,
.plink a:focus::before {
color: #f5f5f5;
}
.plink a:hover,
.plink a:focus {
color: #eb4f43;
border: 4px #eb4f43 solid;
}
.plink {
display: flex;
font-weight: 200;
font-family: 'Oswald', sans-serif;
margin: 0 auto;
padding: 0;
align-items: center;
position: absolute;
top: 46.1%;
left: 15%;
}
&#13;
<h1 class="plink"><a href="#">LEARN MORE</a></h1>
&#13;