右侧图片随左侧鼠标移动到不同的项目文字而改变

最新推荐文章于 2020-09-03 09:17:04 发布

ate0168

最新推荐文章于 2020-09-03 09:17:04 发布

阅读量468

点赞数

分类专栏： JS网页效果文章标签： html html5 css javascript css3

本文链接：https://blog.csdn.net/ate0168/article/details/104559346

版权

以下代码可以实现一个目的：左侧是不同的项目列表，右侧是展示不同项目的图片，鼠标移动到左侧的项目列表文字上，右侧的图片变换成对应的图片展示，淡入淡出的转场效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>右侧图片随左侧鼠标经过不同项目而改变</title>
	<style type="text/css">
	.aa01{
   width:1050px; height:500px;overflow:hidden;margin:0 auto; margin-top:60px;}
	.aa02{
   width:200px; height:500px;float:left; display:inline-block;background-color:#468EFF;text-align: center; }
	.aa02_1 {
    cursor: pointer;width:100%;height:100px;text-align:center;line-height:100px;font-family: "微软雅黑";font-size: 26px; padding:

最低0.47元/天解锁文章

ate0168

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
右侧图片随左侧鼠标移动到不同的项目文字而改变

以下代码可以实现一个目的：左侧是不同的项目列表，右侧是展示不同项目的图片，鼠标移动到左侧的项目列表文字上，右侧的图片变换成对应的图片展示，淡入淡出的转场效果。<!doctype html><html><head><meta charset="utf-8"><title>右侧图片随左侧鼠标经过不同项目而改变</title...
复制链接

扫一扫

专栏目录