导航栏悬停效果

时间：2017-03-24 05:10:53

标签： javascript html css

我有这个小网站，我正在努力写作，而且我遇到了这个烦人的问题。基本上我有一个导航栏，当你将鼠标悬停在导航栏上的主要单词上时，我希望下拉菜单淡入淡出。我尝试了很多方法，它似乎根本不会影响任何事情。我已经查看了不同的页面，但无论我如何尝试和操作它，它似乎仍然无法工作。

我第一次使用CSS：

＆＃13;
＆＃13; 
document.getElementById("server").onmouseover = function() {
  serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
  serverMouseOut()
};

function serverMouseOver() {
  document.getElementById("serverdropdownbox").style.display = "block";
}

function serverMouseOut() {
  document.getElementById("serverdropdownbox").style.display = "none";
}
document.getElementById("serverdropdownbox").onmouseover = function() {
  serverMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
  serverMouseOut()
};

function serverMouseOver() {
  document.getElementById("serverdropdownbox").style.display = "block";
}

function serverMouseOut() {
  document.getElementById("serverdropdownbox").style.display = "none";
}
＆＃13; 
.clearfix {
  clear: both;
}

body {
  background-color: rgb(21, 14, 43);
  background-image: url("../images/backgroundimage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
  background-position: center center;
  overflow: hidden;
}

#steamlogomainbox:hover {
  width: 12vw;
}

#gigalogo {
  width: 26vw;
  height: 8vw;
  margin: 0 0 0 2vw;
  padding: 0;
}

#steamlogomainbox {
  width: 10.5vw;
  height: 7vw;
  float: right;
  background-color: #0B0D16;
  /*000c21*/
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  margin: 0.2vw -1vw 0 0;
  padding: 0;
  overflow: hidden;
}

#steamlogo {
  padding: 0.7vw 0 0 3vw;
  height: 5.6vw;
}

#navbarbox {
  clear: both;
  display: block;
  width: 100vw;
  height: 3.5vw;
  padding: 0vw 0 0 0;
  margin: 0;
}

#navbar,
#navbar ul {
  width: 100vw;
  height: 3.5vw;
  display: flex;
  padding: 0 0 0 0;
  margin: 0;
}

#navbar span {
  height: 3.5vw;
  display: block;
  transform: skewX(15deg);
}

#navbar li {
  color: white;
  list-style: none;
  display: inline-block;
  padding: 1vw 3.95vw 1vw 3.95vw;
  margin: auto;
  text-align: center;
  color: red;
  font-size: 2.3vw;
  font-family: Jura;
  height: 2.5vw;
  transform: skewX(-15deg);
}

#serverdropdownbox {
  display: none;
  float: left;
  color: white;
  background-color: darkblue;
  width: 0;
}

#serverdropdowncontent {
  list-style-type: none;
  width: 16vw;
  margin: 1vw 0 0 10.1vw;
}

#server:hover #serverdropdowncontent li {
  transition: opacity 2s ease-in;
  opacity: 1;
}

#serverdropdowncontent li {
  border: 1px solid white;
  font-size: 25px;
  text-align: center;
  padding: 1vw 0 1vw 0;
  opacity: 0.1;
  background-color: white;
}

.menugradient {
  backround: darkblue;
}

#server {
  background-color: blue;
}
＆＃13; 
<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
</head>

<body>


  <!--Giga logo, top left-->
  <img id="gigalogo" src="images/gigalogo.png">

  <!--Steam logo, top right-->
  <div id="steamlogomainbox">
    <img id="steamlogo" src="images/steamlogo.png">
  </div>

  <!--navigation barrrrrr-->
  <div id="navbarbox">
    <ul id="navbar">
      <a href="default.html">
        <li style="background-color: purple;"><span>Home</span></li>
      </a>
      <a href="servers.html">
        <li id="server"><span>Servers</span></li>
      </a>
      <a href="community.html">
        <li id="community"><span>Community</span></li>
      </a>
      <a href="store.html">
        <li id="store"><span>Store</span></li>
      </a>
      <a href="downloads.html">
        <li id="downloads"><span>Downloads</span></li>
      </a>
      <a href="contact.html">
        <li id="contact"><span>Contact</span></li>
      </a>
    </ul>
  </div>

  <div id="serverdropdownbox">
    <ul id="serverdropdowncontent">
      <a href="serverlist.html">
        <li id="serverdropdownli">Server List</li>
      </a>
      <li id="serverdropdownli">GigaDB</li>
      <li id="serverdropdownli">CS:GO</li>
    </ul>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

我对JS的第二次尝试：

＆＃13;
＆＃13; 
document.getElementById("server").onmouseover = function() {
  serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
  serverMouseOut()
};

function serverMouseOver() {
  document.getElementById("serverdropdownbox").style.display = "block";
  document.getElementById("serverdropdowncontent").style.transition = "opacity 2s ease-in"
  document.getElementById("serverdropdowncontent").style.opacity = "1"
  document.getElementById("serverdropdowncontent").style.WebkitTransition = "opacity 2s ease-in"
  document.getElementById("serverdropdowncontent").style.WebkitOpacity = "1"
}

function serverMouseOut() {
  document.getElementById("serverdropdownbox").style.display = "none";
}
document.getElementById("serverdropdownbox").onmouseover = function() {
  serverMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
  serverMouseOut()
};

function serverMouseOver() {
  document.getElementById("serverdropdownbox").style.display = "block";
}

function serverMouseOut() {
  document.getElementById("serverdropdownbox").style.display = "none";
}
＆＃13; 
.clearfix {
  clear: both;
}

body {
  background-color: rgb(21, 14, 43);
  background-image: url("../images/backgroundimage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
  background-position: center center;
  overflow: hidden;
}

#steamlogomainbox:hover {
  width: 12vw;
}

#gigalogo {
  width: 26vw;
  height: 8vw;
  margin: 0 0 0 2vw;
  padding: 0;
}

#steamlogomainbox {
  width: 10.5vw;
  height: 7vw;
  float: right;
  background-color: #0B0D16;
  /*000c21*/
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  margin: 0.2vw -1vw 0 0;
  padding: 0;
  overflow: hidden;
}

#steamlogo {
  padding: 0.7vw 0 0 3vw;
  height: 5.6vw;
}

#navbarbox {
  clear: both;
  display: block;
  width: 100vw;
  height: 3.5vw;
  padding: 0vw 0 0 0;
  margin: 0;
}

#navbar,
#navbar ul {
  width: 100vw;
  height: 3.5vw;
  display: flex;
  padding: 0 0 0 0;
  margin: 0;
}

#navbar span {
  height: 3.5vw;
  display: block;
  transform: skewX(15deg);
}

#navbar li {
  color: white;
  list-style: none;
  display: inline-block;
  padding: 1vw 3.95vw 1vw 3.95vw;
  margin: auto;
  text-align: center;
  color: red;
  font-size: 2.3vw;
  font-family: Jura;
  height: 2.5vw;
  transform: skewX(-15deg);
}

#serverdropdownbox {
  display: block;
  float: left;
  color: white;
  background-color: darkblue;
  width: 0;
}

#serverdropdowncontent {
  list-style-type: none;
  width: 16vw;
  margin: 1vw 0 0 10.1vw;
}

#serverdropdowncontent li {
  border: 1px solid white;
  font-size: 25px;
  text-align: center;
  padding: 1vw 0 1vw 0;
  opacity: 0.1;
  background-color: white;
}

#server {
  background-color: blue;
}
＆＃13; 
<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
  <link href="css/mainframe.css" type="text/css" rel=stylesheet>
  <link href="css/navbar.css" type="text/css" rel=stylesheet>
</head>

<body>


  <!--Giga logo, top left-->
  <img id="gigalogo" src="images/gigalogo.png">

  <!--Steam logo, top right-->
  <div id="steamlogomainbox">
    <img id="steamlogo" src="images/steamlogo.png">
  </div>

  <!--navigation barrrrrr-->
  <div id="navbarbox">
    <ul id="navbar">
      <a href="default.html">
        <li style="background-color: purple;"><span>Home</span></li>
      </a>
      <a href="servers.html">
        <li id="server"><span>Servers</span></li>
      </a>
      <a href="community.html">
        <li id="community"><span>Community</span></li>
      </a>
      <a href="store.html">
        <li id="store"><span>Store</span></li>
      </a>
      <a href="downloads.html">
        <li id="downloads"><span>Downloads</span></li>
      </a>
      <a href="contact.html">
        <li id="contact"><span>Contact</span></li>
      </a>
    </ul>
  </div>

  <div id="serverdropdownbox">
    <ul id="serverdropdowncontent">
      <a href="serverlist.html">
        <li id="serverdropdownli">Server List</li>
      </a>
      <li id="serverdropdownli">GigaDB</li>
      <li id="serverdropdownli">CS:GO</li>
    </ul>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

对不起，我对JS有非常基本的了解，我确信这是一种我完全错过的直接而简单的方法。

谢谢！

2 个答案:

答案 0 :(得分：0)

试试这个..我在CSS和JS部分做了一些改动。跟着它

document.getElementById("server").onmouseover = function() {
  serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
  serverMouseOut()
};

function serverMouseOver() {
 //add the corresponding classes for the effect
 document.getElementById("serverdropdownbox").className+="animated fadeIn";
}

function serverMouseOut() {
  document.getElementById("serverdropdownbox").className+="animated fadeOut";
}
.clearfix {
  clear: both;
}

body {
  background-color: rgb(21, 14, 43);
  background-image: url("../images/backgroundimage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
  background-position: center center;
  overflow: hidden;
}

#steamlogomainbox:hover {
  width: 12vw;
}

#gigalogo {
  width: 26vw;
  height: 8vw;
  margin: 0 0 0 2vw;
  padding: 0;
}

#steamlogomainbox {
  width: 10.5vw;
  height: 7vw;
  float: right;
  background-color: #0B0D16;
  /*000c21*/
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  margin: 0.2vw -1vw 0 0;
  padding: 0;
  overflow: hidden;
}

#steamlogo {
  padding: 0.7vw 0 0 3vw;
  height: 5.6vw;
}

#navbarbox {
  clear: both;
  display: block;
  width: 100vw;
  height: 3.5vw;
  padding: 0vw 0 0 0;
  margin: 0;
}

#navbar,
#navbar ul {
  width: 100vw;
  height: 3.5vw;
  display: flex;
  padding: 0 0 0 0;
  margin: 0;
}

#navbar span {
  height: 3.5vw;
  display: block;
  transform: skewX(15deg);
}

#navbar li {
  color: white;
  list-style: none;
  display: inline-block;
  padding: 1vw 3.95vw 1vw 3.95vw;
  margin: auto;
  text-align: center;
  color: red;
  font-size: 2.3vw;
  font-family: Jura;
  height: 2.5vw;
  transform: skewX(-15deg);
}

#serverdropdownbox {
  opacity : 0;
  float: left;
  color: white;
  background-color: darkblue;
  width: 0;
}

#serverdropdowncontent {
  list-style-type: none;
  width: 16vw;
  margin: 1vw 0 0 10.1vw;
}


#serverdropdowncontent li {
  border: 1px solid white;
  font-size: 25px;
  text-align: center;
  padding: 1vw 0 1vw 0;
  opacity: 0.1;
  background-color: white;
}

.menugradient {
  backround: darkblue;
}

#server {
  background-color: blue;
}




.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}
<!--Giga logo, top left-->
  <img id="gigalogo" src="images/gigalogo.png">

  <!--Steam logo, top right-->
  <div id="steamlogomainbox">
    <img id="steamlogo" src="images/steamlogo.png">
  </div>

  <!--navigation barrrrrr-->
  <div id="navbarbox">
    <ul id="navbar">
      <a href="default.html">
        <li style="background-color: purple;"><span>Home</span></li>
      </a>
      <a href="servers.html">
        <li id="server"><span>Servers</span></li>
      </a>
      <a href="community.html">
        <li id="community"><span>Community</span></li>
      </a>
      <a href="store.html">
        <li id="store"><span>Store</span></li>
      </a>
      <a href="downloads.html">
        <li id="downloads"><span>Downloads</span></li>
      </a>
      <a href="contact.html">
        <li id="contact"><span>Contact</span></li>
      </a>
    </ul>
  </div>

  <div id="serverdropdownbox">
    <ul id="serverdropdowncontent">
      <a href="serverlist.html">
        <li id="serverdropdownli">Server List</li>
      </a>
      <li id="serverdropdownli">GigaDB</li>
      <li id="serverdropdownli">CS:GO</li>
    </ul>
  </div>

从你的css中删除它

#server:hover #serverdropdowncontent li {
transition: opacity 2s ease-in;
opacity: 1;
}

答案 1 :(得分：0)

如果你只想让它在悬停在它上面时改变背景颜色，这个CSS解决方案应该这样做

.navbar:hover li {
 background-color: rgba(0, 0, 0, 0.1);
}
相关问题
最新问题