导航选项卡悬停

时间:2013-09-11 06:56:10

标签: css hover

我需要帮助创建类似此链接(http://www.standardchartered.co.in/borrow/

的内容

当用户将鼠标悬停在导航上时,将显示灰色三角形图像。我不太清楚如何去做。请帮忙!

1 个答案:

答案 0 :(得分:0)

执行此操作的最佳方法是使用插件,可能用于jQuery。有许多下拉菜单插件可用。谷歌搜索“jquery下拉菜单”将帮助您。对我来说,最初的结果之一是: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

该页面上的第二个似乎具有您想要的效果,但它还取决于您希望菜单的其余部分显示的方式。您需要做一些研究并选择一个适合您的研究。

或者,如果你只是想要一个灰色的三角形出现而没有菜单,当你将鼠标悬停在一个元素上时,那么你想要的是这样的一些css:

li:hover {
    background:url('./images/grey_triangle.png') center bottom;
}

其中说,当li元素悬停时,使用./images/grey_triangle.png作为背景图像,并将其放置在元素底部的中心。您需要创建自己的灰色三角形,设置适当的填充等,但这是效果所需的基本CSS。