ToBeRichManGO
ToBeRichManGO
采纳率0%
2020-12-16 23:35

小组作业写守望先锋官网,请问下面那个鼠标悬浮到哪个英雄就在上面出现介绍的效果怎么做出来?

如图

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • FLJ1027 豆仔的小幸运 4月前

    用框架写的嘛,建议用循环把上面的英雄介绍全部写出来,然后下面英雄图标也是循环出来的,每次hover时获取对应的key,更改对应的key值显示上面的英雄介绍

    点赞 1 评论 复制链接分享
  • alnorthword 禅思院 4月前

    做个大的浮层 利用hover 来控制这个浮层的显隐

    点赞 1 评论 复制链接分享
  • ZSH_jerry shuxhan 4月前

    按理说应该是点击后才能出现英雄界面吧

    点赞 1 评论 复制链接分享
  • oTianKongLan123 恶犬的二哈哈 4月前
  • weixin_46352236 离恢 4月前

    用jq写了一个简单的dom,你找一下思路

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
    			*{margin: 0;padding: 0;}
    			.box{width: 100%;}
    			.big{height: 400px;}
    			.div,.divl{background-color: #ccc;color: #fff;text-align: center;}
    			.big .div{display: none;height: 300px;}
    			.little .divl{width: 100px;height: 100px;display: inline-block;}
        </style>
    </head>
    <body>
    	<div class="box">
    		<div class="big">
    			<div class="div">111</div>
    			<div class="div">222</div>
    			<div class="div">333</div>
    		</div>
    		<div class="little">
    			<div class="divl">111</div>
    			<div class="divl">222</div>
    			<div class="divl">333</div>
    		</div>
    	</div>
    	
    	<script type="text/javascript">
    		$($(".big").children(".div").get(0)).show();
    		$(".little .divl").hover(function(){
    			var l = $(this).index();
    			$(".big .div").eq(l).show();
    			$(".big .div").eq(l).siblings().hide();
    		})
    		
    	</script>
    </body>
    </html>
    点赞 评论 复制链接分享
  • weixin_42261369 酷酷的李小帅 4月前

    加油使用js的鼠标移入事件以及和css(hover)属性

    点赞 评论 复制链接分享

相关推荐