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

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

核心属性

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

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

查看所有标签

猜你喜欢:

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

码农书籍

神经网络与机器学习（原书第3版）

[加] Simon Haykin / 申富饶、徐烨、郑俊、晁静 / 机械工业出版社 / 2011-3 / 79.00元

神经网络是计算智能和机器学习的重要分支，在诸多领域都取得了很大的成功。在众多神经网络著作中，影响最为广泛的是Simon Haykin的《神经网络原理》（第3版更名为《神经网络与机器学习》）。在本书中，作者结合近年来神经网络和机器学习的最新进展，从理论和实际应用出发，全面、系统地介绍了神经网络的基本模型、方法和技术，并将神经网络和机器学习有机地结合在一起。本书不但注重对数学分析方法和理论的探......一起来看看《神经网络与机器学习（原书第3版）》这本书的介绍吧!

码农工具

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

核心属性

神经网络与机器学习（原书第3版）

JSON 在线解析

HTML 编码/解码

SHA 加密