<div class="titTab">
<!--鼠标滑动标签-->
<div id="keyword" class="ctype2">
<div id="datllTab_1" class="datllTab">标题1</div>
<div id="datllTab_2" class="datllTab">标题2</div>
<div id="datllTab_3" class="datllTab">标题3</div>
<div id="datllTab_4" class="datllTab">标题4</div>
<div id="datllTab_5" class="datllTab">标题5</div>
<div id="datllTab_6" class="datllTab">标题6</div>
<div id="datllTab_7" class="datllTab">标题7</div>
<div id="datllTab_8" class="datllTab">标题8</div>
</div>
<!--鼠标滑动显示对应内容-->
<div id="datllTab_a1"class="completetips" style="display:none;">内容1</div>
<div id="datllTab_a2"class="completetips" style="display:none;">内容2</div>
<div id="datllTab_a2"class="completetips" style="display:none;">内容3</div>
<div id="datllTab_a4"class="completetips" style="display:none;">内容4</div>
<div id="datllTab_a5"class="completetips" style="display:none;">内容5</div>
<div id="datllTab_a6"class="completetips" style="display:none;">内容6</div>
<div id="datllTab_a7"class="completetips" style="display:none;">内容7</div>
<div id="datllTab_a8"class="completetips" style="display:none;">内容8</div>
</div>我只学了点 html+css 。实在不懂js 啊。 求帮帮忙。
1 回答
weibo_歌笠横_0
TA贡献11条经验 获得超9个赞
你要的是这种效果吗，给你个例子，没用js的
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
header{
padding-top: 50px;
padding-left: 300px;
}
ul li{
width: 150px;
height: 35px;
float: left;
list-style: none;
line-height: 35px;
font-weight: bold;
}
ul li:hover{
background: gray;
}
ol{
display: none;
}
ul li:hover>ol{
display: block;
}
</style>
</head>
<body>
<header>
<ul>
<li>手机
<ol>
<li>苹果</li>
<li>三星</li>
<li>华为</li>
<li>oppo</li>
</ol>
</li>
<li>手表
<ol>
<li>劳力士</li>
<li>天梭</li>
<li>老皮匠</li>
<li>雷欧</li>
</ol>
</li>
<li>电脑
<ol>
<li>苹果</li>
<li>华硕</li>
<li>戴尔</li>
<li>联想</li>
</ol>
</li>
<li>男装
<ol>
<li>阿玛尼</li>
<li>阿迪</li>
<li>李宁</li>
<li>七匹狼</li>
</ol>
</li>
</ul>
</header>
</body>
</html>
添加回答
举报
0/150
提交
取消