Question

我想在菜单上添加一个块悬停效果。然而，我买的模板有一个很大的样式表，看起来像是来自Darth Vader的后端 - 我的编码知识有限，使得这项任务变得困难。

这是我网站菜单部分的小提琴（它也包含整个样式表）：http://jsfiddle.net/VjhJ4/

悬停时，我想要一个块悬停效果，每个菜单链接都有不同的块颜色，请看这个图片为例（请注意，当鼠标不在时，我希望块很小）：{{3} }

我遇到了一个执行此操作的脚本。 HTML：

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
</div>

CSS：

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
    width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

我读到悬停只能在锚元素的某些IE版本中使用，所以我认为这种技术是最好的。

现在，我该如何将其添加到我自己的页面？随意更新小提琴：http://i.imgur.com/1xbbl.png 如果您需要更多信息，请告诉我。

Answer 1

您需要在悬停时添加边框底部和背景颜色。

请参阅此演示http://jsfiddle.net/enve/VjhJ4/7/

Answer 2

变化：

a:hover { text-decoration: underline; }

to（将颜色更改为您真正想要的颜色）：

a:hover { text-decoration: underline; background-color:red; }

并改变：

a { text-decoration: none; color: #00b7f3;}

to（将颜色更改为您真正想要的颜色）：

a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}

演示：http://jsfiddle.net/KqaC8/

编辑：这只会做悬停颜色，在不悬停时处理底部颜色，请保持。

编辑2：这应该做你想要的一切。

Answer 3

see this DEMO。你需要在悬停上设置背景颜色等

Answer 4

如果您不想修改模板中的CSS，可以执行以下操作...

li.menu-item:hover{background:red !important;}

！important将覆盖模板样式

这是一个小提示，为您提供一些基本的CSS ...您仍然可以使用！important以确保它覆盖您的模板代码http://jsfiddle.net/cX5bk/

Answer 5

http://codepen.io/anon/pen/wqpdI

这是我用我认为你需要的一个例子。它实际上非常简单，有很多方法可以做到！基本上每个链接（或它的父级）都需要一个类，然后你可以改变每个类标记的颜色。

Answer 6

据我所知，你对CSS并不了解，而且你买了一个模板，所以你一定不太了解它。

好吧，所以在所有人向你发送你不理解的东西和解决方案之前，我更新你的小提琴结果，如你所指的那样：

This is your fiddle

ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }

ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}

ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}

ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}

阻止锚点元素的悬停效果

6 个答案: