我想问,我的这个怎么实现遍历小图标的鼠标移上一个个’图文切换’?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
/* 右浮动小图标 */
body{background-color: #6B6B6B;}
.elevator {position: fixed; top: 200px; z-index: 999; right: 0;background-color: #fff;}
.elevator a {display: block; margin: 0 15px; width: 28px; font-size: 12px; border-bottom: 1px solid #EDF1F2;
padding: 15px 0; color: #f01414;}
.elevator a span {display: none;}
</style>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery-validation-1.15.0/dist/jquery.validate.js"></script>
<script>
$(document).ready(function() {
right_img();
});
function right_img() {
var a=$(".elevator a");
a.each(function() {
$(this).hover(function() {
$("img").hide();
$("span").show();
}, function() {
$("span").hide();
$("img").show();
});
});
}
</script>
<body>
<div>
<a href=""><img src="images/objection.png"><span>意见反馈</span></a>
<a href=""><img src="images/FAQ.png"><span>常见问题</span></a>
<a href=""><img src="images/APP.png"><span>APP下载</span></a>
<a href=""><img src="images/public_number.png"><span>官方微信</span></a>
<a href=""><img src="images/stick-5.png"><span>返回顶部</span></a>
</div>
</body>
</html>
始终上路过
未来99