我试图在这里创建类似的效果: codepen.io/davekilljoy/pen/wHAvb?editors=010
第一个按钮效果更具体。我按照大部分说明操作,并添加了一些更改,使其从左侧填写。 出于某种原因,当我将鼠标悬停在它上面时,它会填充整个表格,而不仅仅是按钮。我希望它从按钮的开头到结尾,而不是从表的开头到结尾。 这是一个糟糕的高质量GIF,因此您可以了解现在发生的事情:http://i.imgur.com/vz5TTjy.gif
这是CSS:
#nav {
float: left;
position: relative;
left: -20px;
}
#nav ul {
list-style-type: none;
}
#nav ul li button {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #383736;
letter-spacing:2px;
text-transform: uppercase;
overflow: none;
cursor: pointer;
outline: 0;
background: none;
background: white;
border: 1px solid #383736;
border-radius: 3px;
padding: 7px 12px;
margin: 35px 0px;
z-index: 1;
-webkit-transition: 0.08s ease-in;
}
#nav ul li button:hover {
color: white;
}
#nav ul li button::before {
content: "";
position: absolute;
border: 1px solid white;
background-color: #383736;
right: 100%;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
-webkit-transition: right 0.15s ease;
}
#nav ul li button:hover:before {
right:0;
}
HTML:
<div id="nav">
<ul>
<li><button>About Me</button></li>
<li><button>Links</button></li>
<li><button>Contact Me</button></li>
</ul>
</div>
答案 0 :(得分:0)
你需要设置按钮的位置:relative所以伪使用它作为参考。
#nav {
float: left;
position: relative;
left: -20px;
}
#nav ul {
list-style-type: none;
}
#nav ul li button {
position:relative;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #383736;
letter-spacing:2px;
text-transform: uppercase;
overflow: none;
cursor: pointer;
outline: 0;
background: none;
background: white;
border: 1px solid #383736;
border-radius: 3px;
padding: 7px 12px;
margin: 35px 0px;
z-index: 1;
-webkit-transition: 0.08s ease-in;
}
#nav ul li button:hover {
color: white;
}
#nav ul li button::before {
content: "";
position: absolute;
border: 1px solid white;
background-color: #383736;
right: 100%;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
transition: right 0.15s ease;
}
#nav ul li button:hover:before {
right:0;
}
<div id="nav">
<ul>
<li><button>About Me</button></li>
<li><button>Links</button></li>
<li><button>Contact Me</button></li>
</ul>
</div>