<div class="tu"> 用H5伪元素before与after,网页焦点图片页,当鼠标移动上的时候, 出现 上一张图片和下一张图片的按钮 < img src="img/11.jpg" > </div>
时间: 2024-05-01 13:23:29 浏览: 20
你可以尝试以下代码实现你的需求:
HTML代码:
```html
<div class="tu">
<img src="img/11.jpg">
</div>
```
CSS代码:
```css
.tu {
position: relative;
width: 400px; /* 图片宽度 */
height: 300px; /* 图片高度 */
overflow: hidden; /* 隐藏超出部分 */
}
.tu:before,
.tu:after {
content: "";
position: absolute;
top: 50%; /* 上下居中 */
margin-top: -20px; /* 图标高度的一半 */
width: 40px; /* 图标宽度 */
height: 40px; /* 图标高度 */
background-color: rgba(0, 0, 0, 0.5); /* 图标背景颜色 */
color: #fff; /* 图标颜色 */
text-align: center;
line-height: 40px;
font-size: 24px;
cursor: pointer;
opacity: 0; /* 初始透明度为0 */
transition: all 0.3s; /* 过渡效果 */
}
.tu:before {
left: 10px; /* 左图标位置 */
content: "<";
}
.tu:after {
right: 10px; /* 右图标位置 */
content: ">";
}
.tu:hover:before,
.tu:hover:after {
opacity: 1; /* 鼠标悬停时透明度为1 */
}
.tu:hover:before {
left: 0; /* 左图标位置调整 */
}
.tu:hover:after {
right: 0; /* 右图标位置调整 */
}
```
解释:
1. 使用 `position: relative` 让 `.tu` 相对定位,以便后续绝对定位图标的参考点。
2. 使用 `overflow: hidden` 隐藏超出部分,以确保只显示一张图片。
3. 使用 `:before` 和 `:after` 伪元素在左右两侧添加图标,并使用 `opacity` 控制初始透明度为0,使用 `transition` 添加过渡效果。
4. 使用 `:hover` 伪类控制鼠标悬停时图标的透明度和位置。
注意:
1. 图标样式可以根据需要自行调整。
2. 图片宽度和高度需要根据实际情况设置。
3. 图片需要放在 `.tu` 容器内,否则图标可能会出现定位问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
如何使用card控件里的图片具有设置地图中心点坐标功能?function setMapCente<body> <script type="text/javascript" class="map"> var map = new BMap.Map("baiduMap"); map.centerAndZoom(new BMap.Point(2.33269, 48.863727), 13); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("巴黎"); map.enableScrollWheelZoom(true); </script>
安纳西 >
安纳西 >
安纳西 >
安纳西 > </body>r(lat, lng) { var newCenter = new google.maps.LatLng(lat, lng); map.setCenter(newCenter); }
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)