Question

我环顾四周，无法找到任何特定于我的需求的东西，我很难得到我认为实际工作的简单jquery。

这是我的简单小提琴 http://jsfiddle.net/LBHxc/ （道歉，因为它似乎没有导入外部托管的图像。

Html代码......

<nav class="nav-buttons">
<ul>
    <li class="nav-button"><a href="#">Services</a>

    </li>
    <li class="nav-button"><a href="#">Work</a>

    </li>
    <li class="nav-button top-menu">    <a href="#">Insight</a>

        <ul class="sub-menu">
            <li><a href="#"></a>

            </li>
            <li><a href="#"></a>

            </li>
            <li><a href="#"></a>

            </li>
        </ul>
    </li>
    <li class="nav-button"><a href="#">Contact</a>

    </li>
</ul>
</nav>

Css代码

.nav-buttons {
float:left;
margin-top: 10px;
width: 370px;
height: 20px;
}
.nav-buttons a {
padding:0 1px 20px 0;
display:block;
color: #e4e4e4;
text-transform: uppercase;
text-decoration:none;
-webkit-transition: color .06s ease-in;
-moz-transition: color .06s ease-in;
-o-transition: color .06s ease-in;
transition: color .06s ease-in;
}
.nav-button {
position: relative;
padding: 0;
font-size:13px;
font-family: helvetica, sans-serif;
font-style: normal;
font-weight: 700;
margin: 0 10px;
display: block;
float: left;
}
.top-menu:hover .sub-menu {
 display:block;
}
.top-menu a:hover {
background:url(www.anim-house.co.uk/images/drop-down-arrow.png) no-repeat;
background-position: 50% 26px;
}
.sub-menu {
list-style-type: none;
display:none;
position: absolute;
top: 36px;
left:-400px;
width: 600px;
}
.sub-menu a {
width:178px;
height:150px;
background:#3ca3c5;
float:left;
display:block;
padding:11px;
}
.sub-menu a:hover {
background:#3ca3c5;
color:#2b2b2b!important;
}
.menu-drop-down {
background:url(www.anim-house.co.uk/images/drop-down-arrow.png) no-repeat;
background-position: 50% 26px;
}

的JavaScript

$('.sub-menu').hover(

function () {
$('.top-menu a').addClass('menu-drop-down');
});

我想在这里实现的是，当你将鼠标悬停在“洞察力”上时，你会得到一个下拉框（3个大按钮），并将这些框与链接相关联，是一个相同阴影蓝色的小箭头 http://www.anim-house.co.uk/images/drop-down-arrow.png＆lt; - 那然后，当您将鼠标悬停在子菜单上时，我希望箭头保持在洞察力之下。我已经读过没有使用javascript但不能影响他们父母的子元素，但我很难实现。任何帮助，将不胜感激！（如果你能让我知道我哪里出错了......我毕竟是在学习嘿嘿的任务）

Answer 1

箭头没有显示给我，所以如果我理解当你将鼠标悬停在父链接上时你希望箭头留在下面吗？

我已经更新了这个小提示？

http://jsfiddle.net/LBHxc/9/

.nav-buttons li.top-menu:hover > a {
    background: url('http://www.anim-house.co.uk/images/drop-down-arrow.png') no-repeat bottom center; 
}

Jquery .hover添加一个类 - 或者Child：悬停以影响父类？

1 个答案: