分析如下：
首先你要把代码写好，百左边是1级目录列表，度右边是2级目录列表，然后2级目录最大的知div用display:none先隐藏起来，道用hover。
当鼠标经过1级目录时，给2级目录最回大的div添加display:block属性答让它显示出来。
扩展资料：
1、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处
2、提高访问速度、增加用户体验性
使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。
3、div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。注意：div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>。
就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。
参考资料来源：百度百科-div+css
1.利用elementUI组件里的Tooltip 文字提示实现原始页面：
实现效果：当鼠标悬浮在上左按钮时，出现提示信息
实现代码：
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
参数说明：
参数 说明 类型 可选值 默认值
effect 默认提供的主题 String dark/light dark
content 显示的内容，也可以通过 slot#content 传入 DOM String — —
placement Tooltip 的出现位置 String top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end bottom
更多具体内容请参考：Element - The world's most popular Vue UI framework
2.利用display实现提示内容
原始页面：
实现效果：鼠标悬浮时的效果
实现方法：
template中：
按钮为brother1，悬浮内容为brother2
<div class="father">
<div class="brother1"></div>
<div class="brother2">
进行分析
</div>
</div>
登录后复制
style中：
.brother1:hover+div{
display: block
}
.brother2{
display: none
}
登录后复制
该方法要实现鼠标悬浮效果必须两个类为兄弟节点！！！
3.利用@mouseover和@mouseleave实现提示信息
原始页面：
实现页面：除提示信息外，点击按钮会出现相应的窗口
悬浮效果：
点击效果：
实现方法：
template中：
<div
v-for="(item, index) in leftMenu"
:key="index"
@mouseover="hover = item.id"
@mouseleave="hover = -1"
:class="{ 'icon-item': true, 'icon-active': curIndex == item.id }"
@click="clickBtn(item.id)"
>
<div class="btn-msg" v-if="hover == item.id">{{ item.name }}</div>
</div>
登录后复制
data中：
showOne: true,
showTwo: false,
showThree: false,
登录后复制
leftMenu: [
{ name: '图层管理', id: 0 },
{ name: '实时监控', id: 1 },
{ name: '实时气象', id: 2 }
],
hover: -1,
curIndex: 0
登录后复制
methods中：
// 点击事件
clickBtn(index) {
this.reset()
this.curIndex == index ? (this.curIndex = -1) : (this.curIndex = index)
switch (this.curIndex) {
case 0: {
this.methodOne()
break
}
case 1: {
this.methodTwo()
break
}
case 2: {
this.methodThree()
break
}
default: {
break
}
}
},
登录后复制
reset() {
this.showOne = false
this.showTwo = false
this.showThree = false
},
登录后复制
methodOne() {
this.showOne = !this.sshowOne
},
methodTwo() {
this.showTwo = !this.showTwo
},
methodThree() {
this.showThree = !this.showThree
},
登录后复制
style中：
// 提示信息的样式
.btn-msg {
}
登录后复制
// 按钮的样式
.icon-item {
width: 34px
height: 200px
cursor: pointer
margin-bottom: -15px
显示鼠标手型的样式代码：<html><body><p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p><div style="cursor:pointer">Pointer</div><br /></body></html>。
给div添加设置cursor:pointer属性就可以了。cursor 属性规定要显示的光标的类型（形状），该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，pointer就是手型样式，设pointer鼠标光标就是手型形状了。
代码运行如下：
扩展资料
在DIV CSS布局时候，对象内鼠标指针光标进行控制，比如鼠标经过指针变为手指形状等样式，鼠标指针样式cursor控制。系统默认鼠标指针样式外，可以通过CSS设置图片为鼠标指针，常见有些网站鼠标指针是各种各样小图片样式，当然这个是通过css cursor设置鼠标样式。
鼠标指针样式控制设置是比较常用的，在DIV+CSS布局时候，希望鼠标指向某个局部DIV标签对象时候，鼠标指针光标就变为手指状态，这个时候对对象DIV设置cursor: pointer即可。
参考资料：W3C官网-CSS cursor 属性
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）