- 浮动
- 文字样式
- 背景图片
- 兄弟选择器
- 盒子模型
效果图:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>css 鼠标滑入图片切换</title><style>body,ul{margin: 0;}ul{padding: 0;list-style: none;}.wrap{width: 603px;height: 360px;margin: 50px auto 0;}.wrap .text{float: left;width: 150px;height: 40px;background-color: #0c6;line-height: 40px;text-align: center;color: #fff;cursor: pointer;}.wrap .text:hover{opacity: .7;}.wrap .text + .text{border-left: 1px solid #fff;}.wrap .pic{float: left;width: 603px;height: 320px;background: no-repeat center/cover;background-image: url("./images/1.jpg");}.wrap .text:nth-child(1):hover ~ .pic{background-image: url("./images/1.jpg");}.wrap .text:nth-child(2):hover ~ .pic{background-image: url("./images/2.jpg");}.wrap .text:nth-child(3):hover ~ .pic{background-image: url("./images/3.jpg");}.wrap .text:nth-child(4):hover ~ .pic{background-image: url("./images/4.jpg");}</style>
</head>
<body><div class="wrap"><div class="text">起风了</div><div class="text">侧耳倾听</div><div class="text">千与千寻</div><div class="text">哈尔的移动城堡</div><div class="pic"></div></div>
</body>
</html>
