- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个带有简单导航栏的简单网站,但经过大量研究后,这似乎是一项非常艰巨的任务。
将鼠标悬停在任何按钮上时,它会显示一个下拉菜单以显示更多选项。
我已经可以正常工作了,但是当我将鼠标悬停在下拉菜单的内容上时,我该如何让下拉菜单保持不变?
基本上,当光标离开导航栏按钮并进入下拉菜单时,它不会消失。
我读到过使用 jQuery 是可能的,但如果可能的话,我想单独用 JavaScript 来完成,即使它很长。
导航栏的悬停本身有效,但无论我在悬停在其上时试图将下拉菜单保持在那里,都会一直窃听一切。
这是我的代码,我已经尝试过:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").className += "animated fadeIn";
};
function serverMouseOut() {
document.getElementById("serverdropdownbox").className += "animated fadeOut";
};
document.getElementById("serverdropdownbox").onmouseover = function() {
serverDropdownMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
serverDropdownMouseOut()
};
function serverDropdownMouseOver() {
document.getElementById("serverdropdownbox").style.opacity = "1";
};
function serverDropdownMouseOut() {
document.getElementById("serverdropdownbox").style.opacity = "0";
};
#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;
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;
background-color: white;
}
#server
{
background-color: blue;
}
#communitydropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#communitydropdowncontent
{
list-style-type: none;
width: 19.7vw;
margin: 1vw 0 0 26vw;
}
#communitydropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#community
{
background-color: brown;
}
#storedropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#storedropdowncontent
{
list-style-type: none;
width: 13.6vw;
margin: 1vw 0 0 45.65vw;
}
#storedropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#store
{
background-color: blue;
}
#downloadsdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#downloadsdropdowncontent
{
list-style-type: none;
width: 19.8vw;
margin: 1vw 0 0 59.2vw;
}
#downloadsdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#downloads
{
background-color: brown;
}
#contactdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#contactdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 78.9vw;
}
#contactdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#contact
{
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;
}
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<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>
<div id="communitydropdownbox">
<ul id="communitydropdowncontent">
<a href="events.html"><li>Events</li></a>
<li></li>
</ul>
</div>
<div id="storedropdownbox">
<ul id="storedropdowncontent">
<li>Credits</li>
<li>Items</li>
<li>VIP</li>
</ul>
</div>
<div id="downloadsdropdownbox">
<ul id="downloadsdropdowncontent">
<li>TF2</li>
<li>CS:GO</li>
<li>Minecraft</li>
</ul>
</div>
<div id="contactdropdownbox">
<ul id="contactdropdowncontent">
<li>Contact Us</li>
<li>Staff</li>
<a href="https://steamcommunity.com/groups/gigagamings" target="_blank"><li>Steam Group</li></a>
<li>Appeal Ban</li>
<li>Links</li>
</ul>
</div>
最佳答案
首先 - 您的 HTML 结构无效。 ul
标签只能有 li
作为直接子标签,不能有 a
。所以 ul > a > li
必须替换为 ul > li > a
。
其次 - 如此简单的菜单不需要 JS。将 ul > li > ul
作为子菜单并使用 :hover
在 ul > li
上显示您的子菜单。
ul {
padding: 0;
}
li {
white-space: nowrap;
list-style: none;
}
#menu > li {
position: relative;
display: inline-block;
}
#menu > li > ul {
position: absolute;
left: 0;
top: 100%;
min-width: 100%;
opacity: 0;
transition: opacity 200ms ease-in-out;
}
#menu > li:hover > ul {
opacity: 1;
}
<ul id="menu">
<li><a href="home.html">Home</a></li>
<li>
<span>Servers</span>
<ul>
<li><a href="server1.html">Server 1</a></li>
<li><a href="server2.html">Server 2</a></li>
<li><a href="server3.html">Server 3</a></li>
</ul>
</li>
</ul>
关于javascript - 将鼠标悬停在下拉菜单上时,如何让导航栏的下拉菜单保持不变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43033631/
我有 2 个表 t1,其中存储价格和项目类型以及一个 ENUM 值和 t2,其中存储销售数量。我有一个计算总销售额(价格 * 数量)的查询,但我需要计算两个结果数字之间的差值。 两个数之差的计算公式应
我在使用 zsh 运行 Big Sur 11.2 的 Mac 上更改运行的 java 版本时遇到问题。我想将 Java 1.8 设置为默认设置,因此我使用以下命令设置 JAVA_HOME: $ uns
在下面的代码中,当我改变选择时,会有一个alert。我试图使该功能类似于当我单击 option 时它会显示 alert。 $(document).ready(function() { $("#x"
好吧,我正在制作一个简单的 react 游戏,我的代码如下。现在,当调用 startGame() 时,如果我注释掉 while 循环,一切都会发生,但是当我使用 thread.sleep(1000)
我目前正在尝试将 .plist 文件中的 CFBundleURLTypes 的值更改为新值,但似乎没有任何效果,并且如果我调用,旧值仍然存在 NSLog(@"%@", [[NSBundle mainB
我正在尝试使用 Jsoup 中的解析函数来解析 html 字符串。 我尝试阅读了很多相关的帖子以及API,但仍然没有找到答案。 String html = ""others"; Docume
我正在尝试为水平列表项关闭设置动画alpha 动画有效,layoutparam 值也随时间减少但出于某种原因,这并没有改变列表项的实际高度。 @Override protected void appl
双管道等于: MY_CONST ||= 42 运算符定义? MY_CONST = 42 unless defined? MY_CONST 为什么第二种方式更为普遍?第一个有什么缺点吗? 最佳答案 在一
我希望我的站点地址栏在访问子页面时不要更改其地址,它应该显示我的 index.html ,即使我进入 tosub 页面。 就像我打开 www.xyz.com我导航到它仍应显示的任何页面 www.xyz
我试图通过将购物车存储在数据库的表中来创建购物车,而不是使用内置的 CI 购物车类。我使用 sessionID 来识别一个访问者和另一个访问者。但是我发现sessionID在一段时间内一直在变化,连访
我面临一个奇怪的问题。一旦更改了.java文件-看来测试仍在使用该文件的早期版本(.class)。 从我的 Angular 来看,应该从.build文件夹中删除该类,并从新版本的.java文件重新编译
下面的R代码显示了一个关于向量组合的例子,之后,向量“c”的属性变成了字符。如何让它仍然保持属性为数字? a='aa';b='bb';c=c(1,2,3,4,5) dd=data.table(cbin
我一直在使用 Kinect 和语音识别,我注意到我无法让 AudioLevel 成员从我的 SpeechRecognitionEngine 对象中更改。 我成功地让命令被识别,所以我知道 kinect
大家好,我已经实现了通知功能。我对通知 ID 有疑问。 这是我的代码: protected void ShowNotification(String title, String text){ Noti
所以我第一次正确设置了 UIView 图层的阴影(它显示得非常好)但是当我尝试更改颜色时(没有别的,只是 layer.shadowColor)它不会在 View 中更新。它仍然显示原始颜色。我已经尝试
使用 java 我想在一个程序中生成一些随机值,然后在每次执行第二个程序时在其他程序中使用这些值。 这样做的目的是生成一次随机值,然后在以后每次运行程序时保持并保持它们不变。有可能吗?谢谢 最佳答案
我有几个组件,所有组件都继承了 JCheckBox 而没有覆盖它的任何内容,存储在一个 vector 中,然后遍历该 vector 并将每个组件添加到一个对话框中 CreateLists(); //
我有一个 UITabBarController。现在我想在其上方添加一个 View ,并在用户切换到另一个选项卡时使 View 保持不变。我尝试创建一个 UIViewController,并将 UIT
我正在使用 curses 来打印一个非常漂亮的控制台 UI,我需要它依赖于终端大小。为此,我阅读了 here ,我可以使用 shutil.get_terminal_size .所以我正在做这段代码:
我有一个jsfiddle here . fiddle 中有许多标记文本框。在文本框中输入一个数字,然后继续单击“添加问题”按钮。您将看到剩余的总分等于 10,但它不会改变。剩余分数的数量应该通过减去附
我是一名优秀的程序员,十分优秀!