文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >页面加载时，默认在第一个链接悬停时显示文本

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

Stack Overflow用户
提问于 2014-01-30 00:38:41
回答 2查看 62关注 0票数 0

我在一个ul中有一个汽车画廊，当你将鼠标悬停在每个li (汽车)上时，下面会出现一个列表。我希望第一个li的列表在页面加载时默认显示。我已经找到了用javascript和css显示活动li的方法，但只有当我需要显示每个li中的跨度时，才会显示我对该li拥有的css。

示例：

http://jsfiddle.net/cK6Y5/

HTML

代码语言：javascript
运行
复制
<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

代码语言：javascript
运行
复制
#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;
}
hover
javascript
jquery
html
css
EN

回答 2

Stack Overflow用户

发布于 2014-01-30 00:47:59

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

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

代码语言：javascript
运行
复制
$('#car-nav li a').on('hover', function() {
    $('.default').removeClass('default');
});
票数 1
EN

Stack Overflow用户

发布于 2014-01-30 00:50:26

我同意OverlappingElvis的观点: div应该取代你的跨度。对于实际跨度，您可以添加类似以下内容：

代码语言：javascript
运行
复制
$(document).ready(function() {
    $("#car-01 span").css('display', 'block');
});

如果您将span标记替换为div标记，则可以进行调整。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/21437123

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档