纯 css鼠标事件实例，鼠标移入到图片上显示隐藏内容。
纯 css鼠标事件实例，移入到图片上显示隐藏内容，下拉菜单实例。
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<title>下拉菜单实例|时代Java与您共同学习(NowJava.com)</title>5
<meta charset="utf-8">6
<style>7
.dropdown {8
position: relative;9
display: inline-block;10
}11
12
.dropdown-content {13
display: none;14
position: absolute;15
background-color: #f9f9f9;16
min-width: 160px;17
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);18
}19
20
.dropdown:hover .dropdown-content {21
display: block;22
}23
24
.desc {25
padding: 15px;26
text-align: center;27
}28
</style>29
</head>30
<body>31
32
<h2>下拉图片</h2>33
<p>移动鼠标到图片上显示下拉内容。</p>34
35
<div class="dropdown">36
<img src="https://nowjava.com/static/uv/i/nowj_logo_small.png" alt="nowjava logo" width="100" height="50">37
<div class="dropdown-content">38
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java