頁面加載時，默認顯示第一個鏈接懸停的文本

我有一輛汽車在一個ul的畫廊，當你懸停在每個李（汽車）列表出現在下面。當頁面加載爲默認時，我想要顯示第一個li的列表。我已經找到了使用javascript和css顯示活動li的方法，但是當我需要在每個li中出現的span時，它只會顯示我具有該li的css。頁面加載時，默認顯示第一個鏈接懸停的文本

例如：

http://jsfiddle.net/cK6Y5/

HTML

<section id="brandSearch"> 
    <h2>今日看點</h2> 
    <ul id="car-nav"> 

    <li id="car-01"><a href="#">小型車 
    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 
    </a></li> 

    <li id="car-02"><a href="#">小型車<br>小型車 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-03"><a href="#">家用車 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-04"><a href="#">家用車 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-05"><a href="#">豪華車 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-06"><a href="#">豪華車 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-07"><a href="#">跑車 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-08"><a href="#">SUV 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-09"><a href="#">SUV 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-10"><a href="#">SUV 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 

    <li id="car-11"><a href="#">皮卡 

    <span> 
    <ul><li>帕薩特</li> 
    <li>新軒逸</li> 
    <li>奧迪A6L</li> 
    <li>邁騰</li> 
    <li>菲亞特500</li> 
    <li>奧迪A4L</li> 
    <li>寶馬X3</li> 
    <li>攬勝極光</li> 
    <li>銳界</li> 
    <li>愛唯歐</li> 
    <li>嘉年華</li> 
    <li>榮威W5</li> 
    <li>POLO</li> 
    <li>奧迪A1</li> 
    <li>凱美瑞</li> 
    <li>智跑</li> 
    <li>斯柯達晶銳</li> 
    </ul></span> 

    </a></li> 
    </ul> 


    </section><!--end brandSearch-->

CSS

#car-nav a span ul li { 
padding-right: 10px; 
padding-left: 10px; 
font-size:90%; 
line-height:10%; 
} 
#car-nav a span ul { 
width:900px; 
} 
#car-02 ul { 
margin-left:-90px; 
} 
#car-03 ul { 
margin-left:-180px; 
} 
#car-04 ul { 
margin-left:-270px; 
} 
#car-05 ul { 
margin-left:-360px; 
} 
#car-06 ul { 
margin-left:-450px; 
} 
#car-07 ul { 
margin-left:-540px; 
} 
#car-08 ul { 
margin-left:-620px; 
} 
#car-09 ul { 
margin-left:-700px; 
} 
#car-10 ul { 
margin-left:-770px; 
} 
#car-11 ul { 
margin-left:-840px; 
} 

#car-01 { width: 90px; } 
#car-02 { width: 90px; } 
#car-03 { width: 90px; } 
#car-04 { width: 90px; } 
#car-05 { width: 90px; } 
#car-06 { width: 90px; } 
#car-07 { width: 80px; } 
#car-08 { width: 80px; } 
#car-09 { width: 70px; } 
#car-10 { width: 70px; } 
#car-11 { width: 80px; } 
#car-01 a:hover { background: url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) no-repeat 0px -0px; 
color:#BE191E;} 
#car-02 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -90px 0px no-repeat; 
color:#BE191E;} 
#car-03 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -180px 0px no-repeat; 
color:#BE191E;} 
#car-04 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -270px -0px no-repeat; 
color:#BE191E;} 
#car-05 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -360px -0px no-repeat; 
color:#BE191E;} 
#car-06 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -450px -0px no-repeat; 
color:#BE191E;} 
#car-07 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -540px -0px no-repeat; 
color:#BE191E;} 
#car-08 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -620px -0px no-repeat; 
color:#BE191E;} 
#car-09 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -700px -0px no-repeat; 
color:#BE191E;} 
#car-10 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -770px -0px no-repeat; 
color:#BE191E;} 
#car-11 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -840px -0px no-repeat; 
color:#BE191E;} 
#car-nav { 
width: 920px; 
height: 123px; 
margin-left: 15px; 
padding: 0; 
background-image: url(http://www.sarahtrafford.com/epochTimes/images/carNav.jpg); 
background-repeat: no-repeat; 
position:relative; 
} 

#car-nav li, #car-nav a { 
height: 25px; 
display: block; 
} 

#car-nav li { 
float: left; 
list-style: none; 
display: inline; 
font-size:16px; 
} 
#car-nav li a { 
position: relative; 
padding-top:60px; 
padding-left:20px; 
text-decoration:none; 
color:#A2A2A2; 
} 
#car-nav li a span { 
text-indent: 0em; 
position: absolute; 
top: 120px; 
left:10px; 
width: 900px; 
text-align: justify; 
display: none; 
font-size:16px; 
color:#BE191E; 
padding-left:10px; 
} 

#car-nav li a:hover span { 
display: block; 
}

來源

2014-01-29 saraht

首先，你不需要（也不應該）包裝您的列表在<span>標籤 - <span>用於內聯e lement，而列表是一個塊元素。您可以改爲使用<div>，或者只是不包裝列表。

如何在第一個列表中添加default類，然後以與樣式相同的方式對其進行造型#car-nav li a:hover span。然後，您可以將偵聽器添加到您的#car-nav li a元素以刪除懸停時的默認類。使用jQuery的示例：

$('#car-nav li a').on('hover', function() { 
    $('.default').removeClass('default'); 
});

來源

2014-01-29 16:47:58 OverlappingElvis

跨度是我可以讓ul顯示在懸停上的唯一方法。如果我要放入一個div，是不是都默認顯示？ – saraht

它通常會，但你可以使用CSS隱藏這些元素，就像你已經完成跨度。您可能需要將其顯示設置爲「inline-block」以匹配跨度的默認格式。 – OverlappingElvis

當我嘗試這個它顯示div並顯示它在錯誤的地區，對不起，我不明白如何使這種方式工作 – saraht

我同意OverlappingElvis：div應該替換您的跨度。有了您actuel跨度，您可以添加這樣的事情：

$(document).ready(function() { 
    $("#car-01 span").css('display', 'block'); 
});

，如果你通過DIV的人代替span標籤適應。

來源

2014-01-29 16:50:26 Anthed

這樣做的工作，但是（因爲我不是偉大的Java腳本）我不知道如何隱藏一旦你懸停在另一個鋰 – saraht

也許通過添加你的CSS：＃car-nav li一個跨度{display：none;} – Anthed

，它只是完全刪除它 – saraht

頁面加載時，默認顯示第一個鏈接懸停的文本

回答

相關問題