Question

我遇到了问题。

我创建了一个无序列表，并在其中设置了一些列表项，并为此创建了这个css：

li {
opacity: 0.5;
}

li:hover{
opacity: 1;
}

这个问题是每当我停止从“li”中的单词悬停一个像素时，它会停止悬停“li”并将不透明度设置回0.5，每当我移动鼠标时都会产生闪烁效果。如何制作一个像块一样的“li”，这样就不会发生？我试图在每个“li”中创建一个div并使其成为div：悬停但同样的事情发生了。谢谢你的帮助。

完整的HTML和CSS（不包括边距和内容重置css）：

<!DOCTYPE html>
<html>
  <head>
      <title>Example</title>
      <link rel="stylesheet" href="file.css">
      <link rel="stylesheet" href="reset.css">
  </head>
  <body>
    <div class="header">
      <p><span>Example </span>One</p>
      <ul id="nav_bar">
        <li class="nav_button"><a>Overview</a></li>
        <li class="nav_button"><a>About</a></li>
        <li class="nav_button"><a>Help</a></li>
      </ul>
      <div class "logo"><img class="logo" src="http://i.imgur.com/jufQbVj.png"></div>
      <p id="intro">Random message here.</p>
      <div id="PlayNow">Click here to x!</div>
      <p id="versao">For bla bla<p>
    </div>
  </body>
</html>

font-face {
  font-family: UbuntuR;
  src: url(Ubuntu-R.ttf);
}

@font-face {
  font-family: UbuntuB;
  src: url(Ubuntu-B.ttf);
}

@font-face {
  font-family: UbuntuL;
  src: url(Ubuntu-L.ttf);
}

body{
  background-color: #e4a714;
  cursor: default;
}

.header {
  padding: 16px;
  position: relative;
  text-align: center;
  background-color: #231f20;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.header span{
  font-family: UbuntuB;
}

#nav_bar .nav_button {
  display:inline-block;
  padding-left: 6px;
  padding-right: 6px;
  cursor: pointer;
  opacity: 0.5;
  font-family: UbuntuL;
  color: white;
  font-size: 16px;
}

#nav_bar .nav_button:hover{
  opacity: 1;
}

.logo{
  margin-top: -50px;
  margin-bottom: -90px;
  height: 500px;
  width: 500px;
}

.header p{
  color: white;
  font-family: UbuntuL;
  font-size: 26px;
  padding-bottom: 12px;
}

#intro {
  padding-top: 25px;
  padding-bottom: 30px;
  font-size: 38px;
  font-family: "Segoe WP", "Segoe UI Light", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
}

#PlayNow {
  background-color: #e4a714;
  font-family: UbuntuL;
  display: inline-block;
  color: white;
  padding: 15px;
  font-size: 24px;
  border-radius: 3px;
}

#PlayNow:hover {
  background-color: #ffbb16;
}

#versao {
  font-family: font-family: "Segoe WP", "Segoe UI Light", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  margin-top: 6px;
  font-size: 16px;
  opacity: 0.6;
}

删除：

<div class "logo"><img class="logo" src="http://i.imgur.com/jufQbVj.png"></div>

从代码中开始正常工作。

对我做错的任何建议也会有所帮助。感谢。

Answer 1

你必须清除margin-top：-50。图像边距覆盖无序列表，导致淡入效果。

如果您需要徽标靠近菜单，则必须使用照片编辑器进行编辑。

（HTML / CSS）悬停“li”而不悬停“li”中的文本

1 个答案: