图片不同方向悬停显示不同文字

栏目: 后端 · 前端 · 发布时间: 5年前

核心属性

opacity: 0 隐藏四个方向的文字块，但是可以相应鼠标的悬停

z-index 提高显示文字块的层级，防止触发其他文字块

left: 90%/-90%/top: 90%/-90% 四个方向分别留下10%的触发区域

:hover + left/top 文字块从不同的方向显示

background: hsla( ) 背景颜色半透明

```
<div class=multi-hover>
```
```
<span>螺旋星系NGC1309</span>
```
```
<span>距地球约1.2亿光年</span>
```

<span>塞普希德变星的所在地</span>

<span>厄里达努斯星系云的成员</span>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ngc-1309-2x.jpg" alt="Photograph of NGC 1309">

```
</div>
```

```
.multi-hover {
```
```
position: relative;
```
```
max-width: 500px;
```
```
margin: 0 auto;
```
```
line-height: 0;
```
```
font-family: "KaiTi", sans-serif;
```
```
overflow: hidden;
```
```
}
```
```
.multi-hover img {
```
```
max-width: 100%;
```
```
}
```
```
.multi-hover span {
```
```
box-sizing: border-box;
```
```
position: absolute;
```
```
display: flex;
```
```
align-items: center;
```
```
justify-content: center;
```
```
width: 100%;
```
```
height: 100%;
```
```
padding: 15%;
```
```
color: white;
```
```
font-size: 2em;
```
```
line-height: 1.5;
```
```
font-weight: 100;
```
```
opacity: 0;
```
```
z-index: 2;
```
```
transition: .3s linear;
```
```
-webkit-touch-callout: none;
```
```
-webkit-user-select: none;
```
```
}
```
```
.multi-hover span:nth-child(1) {
```
```
top: 0;
```
```
left: 90%;
```
```
background: hsla(0,70%,50%,0.6);
```
```
}
```
```
.multi-hover span:nth-child(2) {
```
```
top: -90%;
```
```
left: 0;
```
```
background: hsla(90,70%,50%,0.6);
```
```
}
```
```
.multi-hover span:nth-child(3) {
```
```
top: 0;
```
```
left: -90%;
```
```
background: hsla(180,70%,50%,0.6);
```
```
}
```
```
.multi-hover span:nth-child(4) {
```
```
top: 90%;
```
```
left: 0;
```
```
background: hsla(270,70%,50%,0.6);
```
```
}
```
```
.multi-hover span:hover {
```
```
opacity: 1;
```
```
}
```

.multi-hover span:nth-child(odd):hover {

```
left: 0;
```
```
z-index: 3;
```
```
}
```

.multi-hover span:nth-child(even):hover {

```
top: 0;
```
```
z-index: 3;
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Web 2.0 Heroes

Bradley L. Jones / Wiley / 2008-04-14 / USD 24.99

Web 2.0 may be an elusive concept, but one thing is certain: using the Web as merely a means of retrieving and displaying information is history. Today?s Web is immediate, interactive, innovative. It ......一起来看看《Web 2.0 Heroes》这本书的介绍吧!

码农工具

MD5 加密

MD5 加密工具

RGB HSV 转换

RGB HSV 互转工具