我对 Uikit 中的 css 有疑问,我无法弄清楚。我有一个导航部分,当我将鼠标悬停在列表项上时,它不会更改光标指针。我设置了一个名为 custom.css 的个性化 css 文件。如果我从代码中删除它,它就可以工作。同样,如果我在没有我的 css 的情况下在新的 html 文件中输出代码,它就可以工作。我无法以任何方式解决我的问题。
在html下面:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CVING</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/jquery.min.js"></script>
<script src="js/uikit.min.js"></script>
</head>
<body>
<div id="navigation" class="uk-width-1-1">
<!-- Navigation Large Medium Devices -->
<nav class="uk-navbar">
<div id="brand" class="uk-navbar-brand">
<a href="#"><img src="images/cving_neg.png" alt="CV Ing Interview Platform"></a>
</div>
<ul id="menu" class="uk-navbar-nav uk-navbar-flip uk-grid-small">
<li><a id="radar" href=""></a></li>
<li class="uk-active"><a id="cv" href=""></a></li>
<li><a id="career" href=""></a></li>
<li><a id="personalitytest" href=""></a></li>
<li><a id="settings" href=""></a></li>
<li><a id="avatar" href=""></a></li>
</ul>
</nav>
</div> <!-- Fine Navigation -->
<div id="content">
<div id="wrap-cv" class="uk-container-center uk-width-1-2 uk-grid-small">
<div id="menu-cv" class="uk-panel uk-panel-box uk-border-rounded uk-contrast">
<ul class="uk-nav uk-nav-side uk-nav-parent-icon uk-width-1-1" data-uk-nav>
<li class="uk-active"><a href="">Active</a></li>
<li><a href="">Item</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="">Sub item</a></li>
<li><a href="">Sub item</a>
<ul>
<li><a href="">Sub item</a></li>
<li><a href="">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="">Sub item</a></li>
<li><a href="">Sub item</a></li>
</ul>
</li>
</ul>
这是我的CSS:
* {
margin: 0;
padding: 0;
}
/* Navigation */
#navigation {
background-color: #0080D4;
height: auto;
}
#navigation nav {
background-color: #0080D4;
height: auto;
line-height: 46px;
}
ul#menu {
line-height: 50px;
margin-top: 4px
}
ul#menu li {
margin-right: 5px;
}
ul#menu li.uk-active a, ul#menu li.uk-active a img{
background-color: transparent;
color: #fff;
}
#radar {
background: url("../images/radar-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #radar {
background: url("../images/radar-w.png");
background-repeat: no-repeat;
background-position: center;
}
#cv {
background: url("../images/cv-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #cv {
background: url("../images/cv-w.png");
background-repeat: no-repeat;
background-position: center;
}
#career {
background: url("../images/career-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #career {
background: url("../images/career-w.png");
background-repeat: no-repeat;
background-position: center;
}
#personalitytest {
background: url("../images/personalitytest-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #personalitytest {
background: url("../images/personalitytest-w.png");
background-repeat: no-repeat;
background-position: center;
}
#settings {
background: url("../images/settings-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #settings {
background: url("../images/settings-w.png");
background-repeat: no-repeat;
background-position: center;
}
#avatar {
background: url("../images/user_avatar_website.png");
background-repeat: no-repeat;
background-position: center;
}
ul#menu li:hover a {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
background-color: transparent;
}
ul#menu li:last-child:hover a {
border-radius: none;
border: none;
background-color: transparent;
}
/* Content */
#content {
position: relative;
top:0;
left: 0;
min-height: 100vh;
min-width: 100vw;
background: linear-gradient(rgba(13, 69, 133, 0.8), rgba(13, 69, 133, 0.8) ), url("../images/background.jpg") no-repeat center 0px;
background-size: cover;
z-index: -1;
}
div#wrap-cv {
position: relative;
top:10px;
z-index: 1;
}
#menu-cv {
width: 25%;
position: relative;
left: 0;
background-color: #0d4585;
}
div#menu-cv ul {padding-top: 5px;}
/*div#menu-cv ul li {
margin-bottom: 10px;
font-size: 0.8em;
font-weight: bold;
}*/
/* Content Header with Shape Effect */
#header-cv {
position: relative;
background-color: #0D4585;
padding: 0 20px 10px;
border-top-right-radius: 20px;
border-bottom: 2px solid #3a679c;
right: 20px;
margin-top: 20px;
width: 60%;
}
#header-cv:before {
content: '';
position: absolute;
top: -20px;
left: 0;
border: 20px solid #0D4585;
border-top-left-radius: 20px;
border-bottom-color: transparent;
border-right-color: transparent;
border-right-width: 0;
border-bottom-width: 0;
}
#header-cv:after {
content: '';
position: absolute;
top: -40px;
left: 20px;
width: 40%;
border: 20px solid rgba(255, 255, 255, 0);
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: #0D4585;
border-right-width: 100px;
border-left-width: 0;
}
#header-cv h6 {
color: #fff;
margin: 0;
}
/* End Content Header with Shape Effect */