Question

我有一个ul的汽车画廊，当你将鼠标悬停在每个li（汽车）上时，下面会出现一个列表。我希望当页面加载为默认值时显示第一个li列表。我已经找到了用javascript和css展示活跃li的方法，但是当我需要每个li中出现的跨度时，这只能显示我对该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;
}

Answer 1

首先，您不需要（也不应该）将列表包装在<span>标记中 - <span>用于内联元素，列表是块元素。您可以改为使用<div>，或者不使用列表。

如何将default类添加到第一个列表，然后使用与样式#car-nav li a:hover span相同的方式设置样式。然后，您可以向#car-nav li a元素添加侦听器以删除悬停时的默认类。使用jQuery的示例：

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

Answer 2

我同意OverlappingElvis：div应该替换你的跨度。使用您的实际跨度，您可以添加以下内容：

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

如果用div替换span标签，则适应。

页面加载时，默认情况下在第一个链接悬停时显示文本

2 个答案: