因此，我创建了我计划自己使用的功能区菜单的一部分。所以这是到目前为止的样子:
悬停前:
悬停时:
基本上，我希望它显示我的社交图标，并在我添加其他横幅时能够使用它们。
这是我目前使用的代码:
<body>
<ul class="social">
<li class="ribbon" media="facebook"><a href="http://facebook.com"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
</ul>
<script src="https://use.fontawesome.com/c2f336433a.js"></script>
</body>
这是 CSS:
@import 'reset';
@import 'mixins';
ul.social {
position: absolute;
z-index: 4;
margin: -225px auto;
list-style: none;
right: 0;
li.ribbon {
float: right;
cursor: pointer;
position: relative;
width: 75px;
height: 250px;
border: none;
color: white;
padding: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@include transition(all .2s ease-in-out);
@include filter(drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5)));
span {
line-height: 20px;
font-size: 5em;
}
}
li.ribbon:hover {
margin-top: 70px;
color: white;
}
li.ribbon:before {
content: '';
position: absolute;
top: 100%; left: 0;
width: 0; height: 0;
border-top: 25px solid blue;
border-right: 50px solid transparent;
}
li.ribbon:after {
content: '';
position: absolute;
top: 100%; right: 0;
width: 0; height: 0;
border-top: 25px solid blue;
border-left: 50px solid transparent;
}
li.ribbon[media="facebook"] {
background: #3b5998;
color: #1e2e4f;
margin-right: 5px;
}
li.ribbon[media="facebook"]:before,
li.ribbon[media="facebook"]:after {
border-top-color: #3b5998;
}
}
请注意，重置只是 eric meyer 重置，mixin 仅用于转换等......
最佳答案
您看不到图标的原因是 ul 上有 225px 的负边距。悬停时，只有 li 的 margin-top 被设置为 70px 但 ul 仍然有负边距，所以 li 仍然在视口(viewport)上方 155px 左右。这意味着未定位(即具有静态定位)且靠近 li 顶部的 a 仍然不可见。
您可以通过避免 ul 上的 margin 并移动 li 来纠正此问题。我使用了 transform: translateY() 来移动 li，因为这比使用边距(需要重新绘制)更能提高性能。
我还添加了一些额外的属性，例如 text-align、line-height 等，以更好看。
ul.social {
position: absolute;
z-index: 4;
margin: 0px auto; /* modified */
list-style: none;
right: 0;
}
ul.social li.ribbon {
float: right;
cursor: pointer;
position: relative;
width: 75px;
height: 100px; /* modified */
border: none;
color: white;
padding: 5px;
text-align: center; /* added */
line-height: 100px; /* added, equal to height */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transform: translateY(-100%); /* added */
transition: all .2s ease-in-out;
-webkit-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
}
ul.social li.ribbon span {
line-height: 20px;
font-size: 5em;
}
ul.social li.ribbon:hover {
transform: translateY(0%); /* added */
/* margin-top: 70px; removed for better performance */
}
ul.social li.ribbon:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-top: 25px solid blue;
border-right: 50px solid transparent;
}
ul.social li.ribbon:after {
content: '';
position: absolute;
top: 100%;
right: 0;
width: 0;
height: 0;
border-top: 25px solid blue;
border-left: 50px solid transparent;
}
ul.social li.ribbon[media="facebook"] {
background: #3b5998;
color: #1e2e4f;
margin-right: 5px;
}
ul.social li.ribbon[media="facebook"]:before,
ul.social li.ribbon[media="facebook"]:after {
border-top-color: #3b5998;
}
/* added */
ul.social li.ribbon a {
color: white;
}<body>
<ul class="social">
<li class="ribbon" media="facebook"><a href="http://facebook.com"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
</ul>
<script src="https://use.fontawesome.com/c2f336433a.js"></script>
</body>关于html - CSS 功能区 "menu"未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37766178/