html - 需要帮助实现这种效果(HTML 和 CSS)

Question

我想对 this 上的“Dropdown”一词产生悬停效果模板(将光标放在上面时出现的灰色/黑色框)并将其放在 this other 的导航菜单上模板(来自同一站点)

我是初学者，我尝试了很多东西，但我无法达到相同的效果。我尝试从第一个模板 .css 复制 #nav 代码并将其粘贴到另一个模板 css 上，但它只是复制文本、字体、颜色，但悬停效果不存在。

预先感谢您，对于这个愚蠢的问题深表歉意

Answer 1

第一个模板的下拉效果是使用 Javascript 而不是纯 CSS 实现的。您需要在控制它的模板中找到 .js 文件。我查看了源代码，您可以通过右键单击页面并选择“查看源代码”来查看源代码。下拉菜单由名为 Dropotron 的 jQuery 插件控制。

https://github.com/n33/jquery.dropotron

如果将此添加到您希望使用的新模板中，您可以达到相同的效果。

编辑:

发生了 3 件事来在单词本身上产生悬停效果。

• 背景颜色
• 弯 Angular
• 插入白色边框以产生轻微的 3D 效果。

这些是通过三个 CSS 规则实现的:

• 背景
• 边界半径
• 盒子阴影

确切的 CSS 是:

border-radius: 6px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.024) inset, 1px 1px 0px 0px rgba(255, 255, 255, 0.024);

新主题标题的背景色为白色，因此不需要阴影。您只需将其插入到 CSS 文件中:

#nav ul li a {
    border-radius:6px;
}

#nav ul li a:hover {
    background:rgba(0, 0, 0, 0.15);
}

当然，您可以根据需要更改颜色。