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

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

核心属性

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;
```
```
}
```

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

查看所有标签

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

码农书籍

区块链核心算法解析

【瑞士】Roger Wattenhofer（罗格.瓦唐霍费尔） / 陈晋川、薛云志、林强、祝庆 / 电子工业出版社 / 2017-8 / 59.00

《区块链核心算法解析》介绍了构建容错的分布式系统所需的基础技术，以及一系列允许容错的协议和算法，并且讨论一些实现了这些技术的实际系统。《区块链核心算法解析》中的主要概念将独立成章。每一章都以一个小故事开始，从而引出该章节的内容。算法、协议和定义都将以形式化的方式描述，以便于读者理解如何实现。部分结论会在定理中予以证明，这样读者就可以明白为什么这些概念或算法是正确的，并且理解它们可以确保实现......一起来看看《区块链核心算法解析》这本书的介绍吧!

码农工具

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

核心属性

区块链核心算法解析

SHA 加密

UNIX 时间戳转换

HSV CMYK 转换工具