悬停在 <li> 上不起作用！

Question

我试图让导航栏上的文本在鼠标悬停时显示下划线，但由于某种原因它不起作用。我使用了 Hover-master 集合中的 CSS 和一个简单的导航列表。怎么办？！

我是不是用错了Hover-master合集？

编辑：我刚刚插入了我的整个代码并且在代码片段中它可以工作但是当我运行浏览器中的 html 文件时它没有...

EDIT2：文件托管在@http://fransbergstrom.kaggteknik.se/，如您所见，链接无效，代码与下面粘贴的代码完全相同。

HTML & CSS:

@charset "utf-8";
@font-face {
  font-family: Fairview;
  src: url("fonts/Fairview_Regular.otf");
}
/*PRE-CLASSES:*/

@media screen and (max-width: 1440px) {
  html {
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
  /*Zooma ut vid mac så websidan anpassar sig*/
}
div {
  display: block;
}
* {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
}
body {
  background-color: gray;
  font-family: 'Fairview';
  color: #444444;
}
/*   ID's: */

/* NAVIGATION MENU */

#navlist {
  margin-top: 35px;
  padding: 0;
  list-style: none;
}
#navlist li {
  display: inline
}
#navlist li a {
  font-size: 50px;
  text-align: center;
  border-right: 3px solid #fff;
  text-decoration: none;
  width: 200px;
  float: left;
  color: white;
}
/*FRONT PAGE*/

#container {
  width: 70%;
  height: 100%;
  margin: 0 auto;
}
#menu {
  margin-top: 0px;
  height: 130px;
  width: 100%;
}
#menu-nav {
  height: 130px;
  width: 80%;
  float: left;
}
#menu-logo {
  height: 130px;
  width: 20%;
  background: url("images/menulogo.png") no-repeat;
  background-size: contain;
  float: left;
}
/* NEWS */

#news {
  margin-left: 250px;
  margin-top: 140px;
  height: 340px;
  width: 70%;
  float: left;
}
#news-opacity {
  position: absolute;
  margin-left: 0px;
  height: 340px;
  width: 49%;
  background-color: black;
  opacity: 0.5;
  float: left;
  z-index: -1;
}
#news-right {
  height: 100%;
  width: 48%;
  float: left;
}
#news-right p {
  margin-top: 90px;
  color: #e04e21;
  font-size: 100px;
  text-decoration: none;
  text-align: center;
}
#news-right b {
  margin-top: 90px;
  color: white;
  font-size: 60px;
  text-decoration: none;
  text-align: center;
  margin-left: 93px;
}
#news-middle {
  margin-top: 60px;
  height: 70%;
  width: 4%;
  background: url("images/news-divider.png") no-repeat;
  background-size: contain;
  float: left;
}
#news-left {
  height: 100%;
  width: 48%;
  float: left;
}
#news-left p {
  margin-top: 10px;
  margin-left: 50px;
  color: white;
  font-size: 40px;
  text-decoration: none;
  text-align: left;
}
#news-left h1 {
  margin-top: 70px;
  margin-left: 50px;
  color: #e04e21;
  font-size: 50px;
  text-decoration: none;
  text-align: left;
}
/* HEADER */

#header {
  position: relative;
  height: 20px;
  width: 100%;
  margin: auto;
}
#header-opacity {
  position: absolute;
  height: 160px;
  width: 100%;
  margin: auto;
  background-color: black;
  opacity: 0.6;
  z-index: -1;
}
/* CLASSES: */

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("images/background.jpg") no-repeat 0px;
}
/* Underline From Center */

.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}

<!DOCUTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="standard.css" media="screen">
</head>

<body>
  <div class="background">
    <div id="header-opacity"></div>
    <div id="container">
      <div id="header"></div>
      <div id="menu">
        <div id="menu-logo"></div>
        <div id="menu-nav">
          <ul id="navlist">
            <li><a href="#" class="hvr-underline-from-center">Start</a>
            </li>
            <li><a href="#" class="hvr-underline-from-center"><font color="#e04e21">Kontakt</font></a>
            </li>
            <li><a href="#" class="hvr-underline-from-center">Info</a>
            </li>
            <li><a href="#" class="hvr-underline-from-center"><font color="#e04e21">Turneringar</font></a>
            </li>
            <li><a href="#" class="hvr-underline-from-center">Biljetter</a>
            </li>
          </ul>
        </div>
      </div>
      <div id="news">
        <div id="news-opacity"></div>
        <div id="news-right">
          <p>WELCOME</p>
          <b>TO MONSTERHACK</b>
        </div>
        <div id="news-middle">
        </div>
        <div id="news-left">
          <h1>Har kommer det sta nagot</h1>
          <b></b>
          <p>Som informerar lasaren</p>
          <b></b>
          <p>Om eventet med mera</p>
          <b></b>
          <p>Samt dirigerar den till biljetter</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

您尝试过将 font-size 属性添加到 .hvr-underline-from-center:hover 吗？

将此添加到 css:

.hvr-underline-from-center:hover { font-size: 30px; }

Answer 2

   #navlist li a:hover {
    font-size: 55px;
   }

将该行添加到您的 CSS 并输入您自己的像素值而不是“55px”，以便在悬停时调整文本大小

http://jsbin.com/hesisohuse/1/edit

Answer 3

好吧，我刚刚弄明白了，出于某种原因，我的 .background class 导致了这个问题。通过从 class 中删除 position=absolute;，我的标签再次变得可点击。

我不知道为什么会这样，但至少它解决了我的问题。

Answer 4

只需从 .background{} 中删除 z-index:-1;。您将整个页面放在 "sea level" 以下，因此不会触发悬停事件。 ;)

悬停在 <li> 上不起作用！

Hover not working on <li>!

html

css

hover