Question

我有一个问题..我需要选择菜单选项... 我的HTML：

<ul class="ca-menu">
                <li>
                    <a href="#">
                        <span class="ca-icon"><img src="images/home.png"></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Home</h2>
                            <h3 class="ca-sub">Home</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="ca-icon"><img src="images/about.png"></span>
                        <div class="ca-content">
                            <h2 class="ca-main">About</h2>
                            <h3 class="ca-sub">About</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="ca-icon"><img src="images/photo.png"></span>
                        <div class="ca-content">
                            <h2 class="ca-main">contact</h2>
                            <h3 class="ca-sub">Contact/h3>
                        </div>
                    </a>
                </li>

            </ul>

我的css

.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #ff2020;
-webkit-animation: moveFromBottom 300ms ease;
-moz-animation: moveFromBottom 300ms ease;
-ms-animation: moveFromBottom 300ms ease;
 }
.ca-menu li:hover .ca-main{
 color: #000;
-webkit-animation: smallToBig 300ms ease;
-moz-animation: smallToBig 300ms ease;

-ms-animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
background-color: #ff2020;
-webkit-animation: moveFromBottom 500ms ease;
-moz-animation: moveFromBottom 500ms ease;
-ms-animation: moveFromBottom 500ms ease;
}

$(document).ready(function(){
    $("li a").click(function(event){
        $('#navigation li').removeClass();
        $(this).parent().addClass('active');
        event.preventDefault();
    });
});

我必须为li添加一个活动类：将鼠标悬停在我的CSS中？我不想改变任何东西，因为我希望悬停保持不变......请帮助我

Answer 1

问题有点含糊不清。如果您的意思是“我如何设置活动页面菜单项的样式，使其与菜单中的其他项目不同：

执行此操作的方法是在html或body标记上添加一个类，然后相应地设置菜单样式。 e.g。

<body class="section-home">
...
<ul class="ca-menu">
    <li class="menu-home"> ....

因此主页上会有section-home个课程，其中的所有页面都会有section-about

和css类似

.section-home .menu-home,
.section-about menu-about,
...
{ 
    <active styling>
}

这在简单的网站上运行良好（我已经使用了很多年）但如果你有一个动态添加菜单项的CMS，可能会变得笨拙。

祝你好运

替代问题

如果问题意味着，我如何在悬停时设置页面样式，为什么要使用jQuery执行此操作，大多数可以使用CSS完成。

您支持哪些浏览器？

IE9 +和最近的chrome / ff？
移动浏览器怎么样 - 你不能在移动设备上悬停 - 网站是否仍然有用

很多想一想，祝你好运。

在jquery中选择的菜单项

1 个答案:

替代问题