Question

我正在为网站创建一个菜单。我正在尝试更改悬停以点击链接上的效果。

当我将鼠标悬停在子菜单上时，菜单项必须更改。

这是代码

<li class="dropdown">
            <a href="#">item 1</a>
            <ul>
                <li><a href="#">subitem 1</a></li>
                <li><a href="#">subitem 2</a></li>
                <li><a href="#">subitem 3</a></li>
                <li><a href="#">subitem 4</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">item 2</a>
            <ul>
                <li><a href="#">subitem 1</a></li>
                <li><a href="#">subitem 2</a></li>
                <li><a href="#">subitem 3</a></li>
                <li><a href="#">subitem 4</a></li>
            </ul>
        </li>

和css

.nav>li>a {
            position: relative;
            display: block;
            width: 150px;
            margin-left: -5px;
            padding: 10px 10px 10px 15px;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            letter-spacing: 1px;
            font-weight: 900;
            text-decoration: none;
            color: #383838;
}
.nav>li>a:hover, .nav>li:hover>a {
            color: white;
            width: 169px;
            height: 4px;
            background: -webkit-linear-gradient(bottom, #A30C0C, #C42D2D);
            background: -ms-linear-gradient(bottom, #A30C0C, C42D2D);
            background: -moz-linear-gradient(bottom, #A30C0C, C42D2D);
            background: -o-linear-gradient(bottom, #A30C0C, C42D2D);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',                         endColorstr='#f3f3f3',GradientType=0);
}

拜托，帮帮我

Answer 1

你需要这样的东西：SAMPLE

$(".dropdown ul").hide();
$(".dropdown ul li").click(function(){
     $(this).parent().prev('a').html($(this).text());
});
$(".dropdown").hover(function(){
     $(this).find('ul').stop(true,true).slideDown('normal');
      }, function(){
     $(this).find('ul').stop(true,true).slideUp('normal');
});

将css hover类更改为jquery click

1 个答案: