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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

About Face 3 交互设计精髓

Alan Cooper、Robert Reimann、David Cronin / 刘松涛 / 电子工业出版社 / 2008-11 / 72.00元

本书是一本数字产品和系统的交互设计指南，全面系统地讲述了交互设计过程、原理和方法，涉及的产品和系统有个人电脑上的个人和商务软件、Web应用、手持设备、信息亭、数字医疗系统、数字工业系统等。运用本书的交互设计过程和方法，有助于了解使用者和产品之间的交互行为，进而更好地设计出更具吸引力和更具市场竞争力的产品。全书分成3篇：第1篇描述了“目标导向设计”，详细讨论了用户和设计的过程及思想；第2篇讲......一起来看看《About Face 3 交互设计精髓》这本书的介绍吧!

码农工具

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

核心属性

About Face 3 交互设计精髓

JS 压缩/解压工具

XML、JSON 在线转换

html转js在线工具