Question

所以我在我的项目中有这个导航栏，而且就目前而言，当你将鼠标悬停在它上面时，文字会改变颜色。

HTML：

<div class = "container">
    <div class = "header">
        <div class = "header-main">

        </div>

        <div class = "header-nav">
            <ul>
                <li><a class = "active" href="#">Home</a></li>
                <li><a href="about">About</a></li>
                <li><a href="contact">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

* {
    padding = 0;
    margin = 0;
}

.container {
    margin: 0 auto;
    width: 940px;
}

.header-main{
    border-bottom: 1px solid #dadada;
    padding: 20px 0;
}

.header-nav {
    padding: 0 0;
}

.header-nav ul {
    list-style: none;
}

.header-nav ul li {
    float: left;
    margin-right: 20px;
}

.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Novecentosanswide-DemiBold';
    text-transform: uppercase;
}

.header-nav ul li a.active {
    color: #2ecc71;
}

.header-nav ul li a:hover {
    color: #3e3e3e;
}

我想知道的是，当您将鼠标悬停在其上时，我可以添加一个改变颜色的框（编辑：并跨越导航的高度）。我能找到的最好的例子是Windows 10's site

Answer 1

.header-nav ul li a {
    display:block;
    padding:10px;
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Novecentosanswide-DemiBold';
    text-transform: uppercase;
}

.header-nav ul li a:hover {
    color: #fff;
    background:#000;
    padding:10px;

}

我认为，这两个风格的课程将会有所帮助。看看吧。

Answer 2

您必须控制元素大小。你可以用

来解决这个问题

app.controller('NewHolidayModalController', function ($scope, close, HolidaysService) {

var centerList = $scope.$parent.$$childHead.centers;
var currCenterDN = $scope.$parent.$$childHead.currentCenter.DN;
var indexOfCurrentCenter = _.indexOf(_.pluck(centerList, 'DN'), currCenterDN);
centerList[indexOfCurrentCenter].ticked = true;
var selectedDNs;
$scope.dt = k = new Date();
$scope.close = function (result) {
    centerList[indexOfCurrentCenter].ticked = false;
    close(result, 500); 
};
$scope.conditionsForSendNewHoliday = function () {
    selectedDNs = _.select(centerList, { ticked: true });
    return (($scope.starttime >= $scope.endtime) || ($scope.dt < k) || (angular.isDate($scope.dt) == false) || (angular.isDate($scope.starttime) == false) || (angular.isDate($scope.endtime) == false) || ($scope.HolidayName.length == 0) || (selectedDNs.length == 0));
};
$scope.addHoliday = function () {
    holiday = HolidaysService.formatDateAndTime($scope);
    for (i = 0; i < selectedDNs.length; i++)
        {
        newHoliday = { DN: selectedDNs[i].DN, HolidayName: $scope.HolidayName, HolidayDate: holiday.Date, BeginHour: holiday.start, EndHour: holiday.end }
            HolidaysService.addHoliday(newHoliday)
            .success(function (data, status, headers, config) {
                if ((_.select($scope.$parent.$$childHead.holidays, { BeginHour: data.BeginHour }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { EndHour: data.EndHour }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { HolidayDate: data.HolidayDate }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { EndHour: data.EndHour }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { HolidayName: data.HolidayName }).length == 0))
                    $scope.$parent.$$childHead.holidays.push(data);
                centerList[indexOfCurrentCenter].ticked = false;
                alert("holiday was created");
            })
            .error(function (data, status, headers, config) {
                if (status == 409)
                    alert("Holiday " + data.HolidayName + " Cannot be created for " + data.DN + " BECAUSE OF OVERLAPPED HOLIDAYS.")
            })
    }
}

请参阅fiddle示例

Answer 3

你错过了很多东西：

清除浮动
从ul中删除边距，导致意外尺寸。
向链接锚点添加填充。

<强> CSS：：

* {
    padding=0;
    margin=0;
}
.container {
    margin: 0 auto;
    width: 940px;
}
.header-main {
    border-bottom: 1px solid #dadada;
    padding: 20px 0;
}
.header-nav {
    padding: 0 0;
}
.header-nav ul {
    list-style: none;
    margin:0;
    padding:0;
}
.header-nav ul li {
    float: left;
    margin-right: 20px;
}
.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family:'Novecentosanswide-DemiBold';
    text-transform: uppercase;
    padding:5px 10px;
}
.header-nav ul li a.active {
    color: #2ecc71;
    background-color:#BFBFBF;
}
.header-nav ul li a:hover {
    color: #3e3e3e;
    background-color:#BFBFBF;
}
.header-nav ul:after {
    clear:both;
    content:"";
    display:block;
}

演示：https://jsfiddle.net/lotusgodkk/82n0rwb7/5/

Answer 4

1。设置阻止元素的链接

2。在链接中添加填充（不列表项）

.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Novecentosanswide-DemiBold';
    text-transform: uppercase;
    display: block;
    padding: 4px 8px;
}

3. 将背景颜色设置为链接

.header-nav ul li a.active {
    background-color: #2ecc71;
}

.header-nav ul li a:hover {
    background-color: #3e3e3e;
}

4。清除ul

.header-nav ul:after {
    clear: both;
    content: "";
    display: table;
}

5. ???

6。利润

https://jsfiddle.net/BramVanroy/82n0rwb7/9/

如果没有列表项的边距，它可能看起来更漂亮吗？ Like so

（我刚注意到你小提琴的CSS中有一个错误。你将margin = 0设置为*，但是指定符应该是冒号而不是等号，如下所示： margin: 0。）

导航后面的框css

4 个答案: