javascript - 导航栏悬停效果

标签 javascript html css

我有一个正在尝试编写的小网站，但遇到了这个令人讨厌的问题。基本上我有一个导航栏，当您将鼠标悬停在导航栏上的主词上时，我希望下拉菜单淡入。试了很多方法，好像一点影响都没有。我查看了不同的页面，但无论我如何尝试和装配它，它似乎仍然无法正常工作。

我对 CSS 的第一次尝试:

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";
}
.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;
}
<!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>

我对 JS 的第二次尝试:

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";
}
.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;
}
<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>

抱歉，我对 JS 有非常非常基本的了解，我确信我完全错过了一种直接且更简单的方法。

谢谢!

最佳答案

试试这个。我对 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;
}

关于javascript - 导航栏悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42991832/

上一篇：html - CSS 伪类 :hover and :active not working

下一篇：jquery - 在不调整图像大小的情况下将图像包含在较小的父 div 中

相关文章：

javascript - 创建 JSON 对象的排列？

javascript - 如何将json数据插入到表中？

javascript - (显示更多)/(显示更少)按钮 VueJS 中的问题

html - 如何扩展css渐变？

html - html中带虚线下划线的目录

html - 奇怪的线突然出现？

html - 在image的 `w`中解释 `srcset`

javascript - 迭代 HTML 页面中的所有脚本标记以查找正则表达式的匹配项

html - 对重叠元素应用变换

javascript - 单击 Ajax 可排序表的一行时如何打开信息窗口

©2024 IT工具网  联系我们