jQuery中選擇的菜單項

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

我必須在css中為li：hover添加一個活動類嗎？我不想更改任何內容，因為我希望懸停保持不變。.請幫助我

Answer 1

問題有點模棱兩可。 如果您的意思是“如何為活動頁面的菜單項設置樣式，使其與菜單中的其他項不同：

一種方法是在html或body標簽上創建一個類，然后相應地設置菜單樣式。 例如

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

因此，首頁將具有class section-home ，而about中的所有頁面都具有section-about

而CSS將是這樣的

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

這在簡單的站點上確實能很好地工作（我已經使用了很多年了），但是如果您擁有一個可動態添加菜單項的CMS，可能會變得很笨拙。

祝好運

替代問題

如果問題的意思是，如何在鼠標懸停時設置頁面樣式，為什么要使用jQuery，大多數可以使用CSS進行。

您支持哪些瀏覽器？

IE9 +和最近的Chrome / ff？
移動瀏覽器怎么樣-您不能將鼠標懸停在該網站上-該網站是否仍可以正常工作

有很多事情要考慮，再次祝你好運。

jQuery中選擇的菜單項

問題描述

1 個解決方案

解決方案1
0 2014-04-23 07:42:03

替代問題

jQuery中選擇的菜單項

問題描述

1 個解決方案

解決方案1 0 2014-04-23 07:42:03

替代問題

解決方案1
0 2014-04-23 07:42:03