Php 箭头悬停效果'；s以导航链接框为中心
我在Wordpress中建立了一个网站，在链接周围有一个灰色的框，当你将鼠标悬停在这些框上时，它们会变成蓝色，框中会有一个箭头。我的问题是，它们是绝对放置的，因此如果导航链接较长或较短，则箭头不会居中于导航框。我能够用纯CSS实现这个效果。这是我的密码 HTMLPhp 箭头悬停效果'；s以导航链接框为中心,php,html,css,Php,Html,Css,我在Wordpress中建立了一个网站，在链接周围有一个灰色的框，当你将鼠标悬停在这些框上时，它们会变成蓝色，框中会有一个箭头。我的问题是，它们是绝对放置的，因此如果导航链接较长或较短，则箭头不会居中于导航框。我能够用纯CSS实现这个效果。这是我的密码 HTML 当前使用三角形的问题之一是，在内联元素中嵌套块元素，这是无效的CSS。（但可以在块元素中嵌套内联元素） 因为我们必须使用显示：block；为了形成CSS3三角形，让我们也向父元素添加display:block 我还将三角形的位置更改为p
当前使用三角形的问题之一是，在内联元素中嵌套块元素，这是无效的CSS。（但可以在块元素中嵌套内联元素） 因为我们必须使用显示：block；为了形成CSS3三角形，让我们也向父元素添加display:block 我还将三角形的位置更改为position:relative，因为我想相对于锚元素定位它 最后使用边距：0自动以水平对齐三角形。假设每个锚都使用相同的高度，因为这是您的导航，所以最后使用底部：-20px相应地调整三角形的垂直位置 请参见此处的演示： 我将您的a:hover:after更改为a:after只是为了演示 .main-nav ul a{ color: #0f0f0f; text-decoration: none; } .main-nav ul li a{ color: #0f0f0f; text-decoration: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #efefef; padding: 10px; display: block; } .main-nav ul a:hover{ color: #fff; text-decoration: none; background-color: #5dbbe0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; } .main-nav ul li { float: left; margin: 25px 0 0 15px; list-style: none; } .main-nav ul a:after { content: ' '; /* position: absolute; */ position: relative; bottom: -20px; /*adjust vertical height as necessary */ width: 0; height: 0; /* left: 18px;*/ /*top: 36px;*/ text-align: center; border-width:10px 10px 0; border-style: solid; border-color: #5dbbe0 transparent; margin: 0 auto; display: block; } .主导航ul a{ 颜色：#0f0f； 文字装饰：无； } .主导航ul li a{ 颜色：#0f0f； 文字装饰：无； -webkit边界半径：10px； -moz边界半径：10px； 边界半径：10px； 背景色：#EFEF； 填充：10px； 显示：块； } .主导航ul a：悬停{ 颜色：#fff； 文字装饰：无； 背景色：#5dbbe0； -webkit边界半径：10px； -moz边界半径：10px； 边界半径：10px； 位置：相对位置； } .主导航ul li{ 浮动：左； 利润率：25像素0.15像素； 列表样式：无； } .主导航ul a:在{ 内容：''； /*位置：绝对位置*/ 位置：相对位置； 底部：-20px； /*根据需要调整垂直高度*/ 宽度：0； 身高：0； /*左：18px；*/ /*顶部：36px*/ 文本对齐：居中； 边框宽度：10px 10px 0； 边框样式：实心； 边框颜色：#5dbbe0透明； 保证金：0自动； 显示：块； }
如何使悬停状态的箭头与导航框居中？由于我的导航链接（主页、关于、博客、常见问题解答、服务、公文包）的宽度各不相同，因此箭头会根据它们的位置移动。当你把鼠标悬停在链接上时，我希望它们位于链接的中心。对不起，我没说清楚，太好了！非常感谢你！欢迎光临！如果您觉得我充分回答了您的问题，请单击我的答案旁边的复选标记。这样做可以确认您的问题已得到解决，并为您自己和回答您问题的用户提供信誉评分，这不仅可以在stackoverflow上提供更多功能，还可以帮助用户获得同行的信任。谢谢
.main-nav ul a{
color: #0f0f0f;
text-decoration: none;
}
.main-nav ul li a{
color: #0f0f0f;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #efefef;
padding: 10px;
}
.main-nav ul a:hover{
color: #fff;
text-decoration: none;
background-color: #5dbbe0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
}
.main-nav ul li {
float: left;
margin: 25px 0 0 15px;
}
.main-nav ul a:hover:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 18px;
top: 36px;
text-align: center;
border-width:10px 10px 0;
border-style: solid;
border-color: #5dbbe0 transparent;
display: block;
}