Question

我有一个我在Wordpress中构建的网站，链接周围有一个灰色的框，当你将鼠标悬停在它们上面时，它们变成蓝色，箭头从框中下降。我的问题是它们是绝对放置的，如果导航链接更长或更短，箭头不会居中到导航框。我能用纯CSS实现这个效果。这是我的代码。

HTML

<div id="nav">

            <div class="navwrapper">
                    <div class="main-nav">
                        <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>
                    </div>
                    <div class="clearfix"></div>
            </div>
        </div>

CSS

.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;
}

Answer 1

您目前使用三角形的一个问题是您在内联元素中嵌套块元素，这是无效的CSS。（您可以在块元素中嵌套内联元素）

因为我们必须使用 display：block ;为了形成CSS3三角形，我们还可以将 display：block 添加到父元素中。

我还将三角形的位置更改为 position：relative ，因为我想将其相对于锚元素定位

最后使用 margin：0 auto; 水平对齐三角形。我假设你为每个锚使用相同的高度，假设这是你的导航，所以最后使用 bottom：-20px 相应地调整三角形的垂直位置

在此处查看演示：http://jsfiddle.net/radialglo/Am48P/7/

我将 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;
    }

箭头悬停效果，以导航链接框为中心

1 个答案: