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悬停菜单？我用jokesmenu作为li。

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');
  }
);

如何使用悬停到菜单

2 个答案: