Question

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

我是否错误地使用了Hover-master集合？

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

EDIT2：文件托管@ http://fransbergstrom.kaggteknik.se/，正如您所看到的，链接不起作用，代码是下面粘贴的代码的精确副本。

HTML＆amp; 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并添加自己的像素值而不是＆＃39; 55px＆＃39;在悬停时播放文本大小

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

Answer 3

Okey我只是想通了，出于某种原因我的.background课程造成了问题。通过从类中删除position=absolute;，我的标签再次可以点击。

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

Answer 4

只需从.background {}中移除z-index:-1;即可。您将整个页面放在“海平面”下方，因此悬停事件不会触发。 ;）

悬停不在<li>！</li>上工作

4 个答案: