Question

所以我的问题是如何让我的CSS圈子具有绝对的响应能力？圆圈（.full-circle）位于我的导航按钮上方，悬停时旋转。这是我的代码，我正在使用ASP.NET MVC。

HTML ----------

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
        </div>
        <div class="full-circle"></div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("About", "Index", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Work", "Work", "Home")</li>
            </ul>
            @*@Html.Partial("_LoginPartial")*@
            </div>

CSS ----------

.full-circle {
 background-color: rgba(204, 0, 102, 0);
 border: 3px solid white;
 height: 120px;
 width: 120px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 position:absolute;
 margin-left:22em;
 top:0px;
}
.navbar-nav li {
width:200px;
height:50px;
text-align:center;
padding:0 0 0 0;
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

Answer 1

use this..........

<style>
.full-circle {
 background-color: rgba(204, 0, 102, 0);
 border: 3px solid white;
 height: 120px;
 width: 120px;
 -moz-border-radius:50%;
 -webkit-border-radius:50%;
 position:absolute;
 left:0px;
 margin:0px;
}

</style>

如何使绝对定位的圆响应？还是其他路线？

1 个答案: