1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。
2、需要将图片先进行隐藏。
3、设置文字滑过时hover+图片样式才让图片显示出来。
a{color: #0162f4}鼠标离开的时候颜色为蓝色，#0162f4颜色代码自己改
a:hover{text-decoration:underlinecolor: #C20C0C}
鼠标经过的时候出现下划线text-decoration:underline，不要下划线改成text-decoration:none即可，color: #C20C0C为鼠标经过时字体显示的颜色！
你最好把你现有的代码发上来？因为这样好有针对性啊，我写完了你未必能用上啊。因为我不知道你用的是文字型导航还是图片型导航还是结合型，不同的应用有不同的方法
——————————————下面的这个是专门针对导航采用了A链接的：
<style type="text/css">
.nav{
/*这里是你导航内文字的CSS*/
text-decoration:none
}
.nav:hover, .nav.select{
text-decoration:underline
}
</style>
<body>
<div>
<a class="nav" href="#">第一个</a>
<a class="nav" href="#">第二个</a>
<a class="nav" href="#">第三个</a>
<a class="nav" href="#">第四个</a>
<a class="nav" href="#">第五个</a>
</div>
</body>
____________下面的针对导航采用了非A链接的文字（因为考虑到IE6兼容的问题，才引入了JS）：
<script type="">
window.onload = function(){
var myNav = document.getElementById("divNav").getElementsByTagName("span")
for(var i=0i<myNav.lengthi++){
myNav[i].onmouseover = function(){this.style.textDecoration = 'underline'}
myNav[i].onmouseout = function(){this.style.textDecoration = 'none'}
}
}
</script>
<style type="text/css">
#divNav span{
/*这里是你导航内文字的CSS*/
cursor:pointer
}
</style>
<body>
<div id="divNav">
<span>第一个</span>
<span>第二个</span>
<span>第三个</span>
<span>第四个</span>
<span>第五个</span>
</div>
</body>
_________________以上用法只针对文本型导航，如果想使用图片型，就麻烦多了，用法和灵活性也更多，所以得看到你的程序才能有针对性地回答。
.
