1

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

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

悬停时，我想要一个块悬停效果，每个菜单链接具有不同的块颜色，以这张图片为例（请注意，当鼠标不在它上面时，我希望块很小）：http://i.imgur .com/1xbbl.png

我遇到了一个执行此操作的脚本。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: //jsfiddle.net/VjhJ4/ 如果您需要更多信息，请告诉我。

4

6 回答 6

2

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

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

于 2012-08-10T17:07:27.327 回答
1

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

没关系，所以在所有人向您发送您不理解的东西和解决方案之前，我用您所指的图片更新了您的小提琴：

这是你的小提琴

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;}
于 2012-08-10T17:18:31.413 回答
1

改变：

a:hover { text-decoration: underline; }

到（将颜色更改为您真正想要的任何颜色）：

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

并改变：

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

到（将颜色更改为您真正想要的任何颜色）：

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

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

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

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

于 2012-08-10T16:46:37.860 回答
1

看到这个演示。您需要在悬停时设置背景颜色等

于 2012-08-10T16:48:34.313 回答
1

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

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

!important 只会覆盖模板样式

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

于 2012-08-10T16:49:43.427 回答
1

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

这是我用我认为你需要的东西制作的一个例子。其实很简单，有很多方法可以做到！基本上每个链接（或其父链接）都需要一个类，然后您可以更改每个类标签的颜色。

于 2012-08-10T16:52:27.937 回答