css - 如何使用鼠标悬停菜单

Question

我的CSS是：

.jokesmenu  li a:hover {
    background-color: #35afe3;
    background-image:-webkit-gradient(
        linear, 
        left top, 
        left bottom, 
        from(rgb(69, 199, 235)),
        to(rgb(38, 152, 219))
    );
background-image:-webkit-linear-gradient(
        top, 
        rgb(69, 199, 235), 
        rgb(38, 152, 219)
    );
    background-image:-moz-linear-gradient(
        top,
        rgb(69, 199, 235), 
        rgb(38, 152, 219)
    );
background-image:-o-linear-gradient(
        top, 
        rgb(69, 199, 235), 
        rgb(38, 152, 219)
    );
    background-image:-ms-linear-gradient(
        top, 
        rgb(69, 199, 235), 
        rgb(38, 152, 219)
    );
background-image:linear-gradient(
        top, 
        rgb(69, 199, 235), 
        rgb(38, 152, 219)
    );
    filter: progid:DXImageTransform.Microsoft.gradient(
        GradientType=0,
        StartColorStr='#45c7eb', 
        EndColorStr='#2698db'
    );
color:#fff;
    list-style:none;
    text-decoration:none;
}

html是：

<ul class="jokesmenu">
            <li class="jokesmenu"><a href="http://www.domain.com/jokes_sms/">SMS<span><?php echo $jokes_sms; ?></span></a>    </li>

</ul>

如何使用上面的 css 悬停菜单？我用笑话菜单作为李。

Answer 1

你到底想做什么？如果您将链接悬停在您希望列表背景更改的列表中？

如果是这样，请尝试从 li 中删除“jokesmenu”类并设置两个 CSS 规则

ul.jokesmenu { background: #eee; }
ul.jokesmenu li a:hover > ul.jokesmenu { background: #000; }

<ul class="jokesmenu">
<li><a href="#">Link</a></li>
</ul>

因此，当您悬停链接时，这应该会更改列表背景。希望有帮助。

Answer 2

如果你想让 li 作为活动或悬停阶段。然后你必须jquery

$("li a").hover(
  function () {
    $(this).parent('li').addClass('active');
  }, 
  function () {
    $(this).parent('li').removeClass('active');
  }
);