1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。
2、需要将图片先进行隐藏。
3、设置文字滑过时hover+图片样式才让图片显示出来。
<style>li a{ text-decoration:none}
li a:hover{ text-decoration:underline}
</style>
text-decoration:none 这是清除 a 标签下划线
a:hover 是鼠标经过效果
text-decoration:underline 这个属性是给鼠标经过是 文字显示下划线
用css很容易实现，添加一个样式cursor: text，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
div{
cursor: text
background: #eeeeee
width: 400px
height: 200px
}
</style>
</head>
<body>
<div>
Hello World!
</div>
</body>
</html>
效果如下：
cursor样式说明：
url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
