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

栏目: 后端 · 前端 · 发布时间: 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;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

仿生智能计算

科学出版社 / 2011-1 / 50.00元

《仿生智能计算》系统、深入地介绍了仿生智能计算的起源、原理、模型、理论及其应用，力图概括国内外的最新研究进展。全书共分12章，主要包括仿生智能计算的思想起源、研究现状及机制原理，仿生智能计算的数学基础；蚁群算法、微粒群算法、人工蜂群算法、微分进化算法、Memetic算法、文化算法、人工免疫算法、DNA计算的原理、模型、理论和典型应用，以及仿生硬件、仿生智能计算研究前沿与展望。附录给出了各章算法的程......一起来看看《仿生智能计算》这本书的介绍吧!

码农工具

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

核心属性

仿生智能计算

XML、JSON 在线转换

Markdown 在线编辑器

RGB CMYK 转换工具