修复悬停元素在居中文本中的位置

安德鲁·特罗菲莫夫(Andrew Trofimov)

我在容器中居中放置了元素,并且我想在保留其位置的同时给悬停的元素保留左填充。有可能吗

看,这是一个例子:

    body {
      font-size: 2em;
    }
    .container {
        text-align: center;
    }

    .item:hover {
      padding-left: 0.5em;
    }
    <div class="container">
        <span class="item">Hello</span>
        <span class="item">my</span>
        <span class="item">wonderful</span>
        <span class="item">world</span>
    </div>

当您将元素悬停时,您会注意到它在x轴上的位置发生了变化,但是需要固定它,以推动其他元素。

陪同Afif

您可以尝试像下面这样同时使用两个空格

body {
  font-size: 2em;
}

.container {
  text-align: center;
  pointer-events:none;
}
.item {
  position:relative;
  left:0;
  transition:0.5s;
  pointer-events:initial;
}

/* previous elements: move to left */
.container:hover .item{
  left:-10px;
}
/* hovered element: don't move  */
.container .item:hover {
  left:0; 
}
/* next elements: move to right 
*/
.container .item:hover ~ *{
  left:10px;
}
<div class="container">
  <span class="item">Hello</span>
  <span class="item">my</span>
  <span class="item">wonderful</span>
  <span class="item">world</span>
</div>

并且只有左空格:

body {
  font-size: 2em;
}

.container {
  text-align: center;
  pointer-events:none;
}
.item {
  position:relative;
  left:0;
  transition:0.5s;
  pointer-events:initial;
}

.container:hover .item{
  left:-10px;
}

.container .item:hover,
.container .item:hover ~ *{
  left:0; 
}
<div class="container">
  <span class="item">Hello</span>
  <span class="item">my</span>
  <span class="item">wonderful</span>
  <span class="item">world</span>
</div>

或只有合适的空间:

body {
  font-size: 2em;
}

.container {
  text-align: center;
  pointer-events:none;
}
.item {
  position:relative;
  left:0;
  transition:0.5s;
  pointer-events:initial;
}

.container .item:hover ~ *{
  left:10px;
}
<div class="container">
  <span class="item">Hello</span>
  <span class="item">my</span>
  <span class="item">wonderful</span>
  <span class="item">world</span>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

div中带边框半径的居中文本

来自分类Dev

UWP TextBox中的垂直居中文本和光标

来自分类Android

Jetpack撰写-居中文本

来自分类Dev

悬停在其他元素上时修复元素的位置

来自分类Dev

居中位置:固定元素

来自分类Dev

可编辑的<span>,居中文本

来自分类Dev

正确居中文本(PIL /枕头)

来自分类Java

如何使用PDFBox居中文本

来自分类Dev

在div下添加居中文本,而不将其放在同一div中

来自分类Dev

居中<pre>没有居中文本的块

来自分类Dev

“文本对齐:居中”在span元素中不起作用

来自分类Dev

尝试使居中元素中的文本左对齐

来自分类Dev

具有100%图像比例的背景的div和其上具有可悬停按钮的div,具有100%div区域和居中文本

来自分类Dev

使居中文字从与非居中文字相同的水平位置开始

来自分类Dev

保持元素始终居中,左侧文本居中

来自分类Dev

IE中文本中的问号

来自分类Java

Java 2D-垂直居中文本

来自分类Dev

Xamarin在图像上方形成垂直居中文本

来自分类Dev

力导向图中曲线链接的居中文本

来自分类Android

按钮中有viewStart对象时居中文本

来自分类Dev

Kivy TextInput水平和垂直对齐(居中文本)

来自分类Dev

使用核心图形绘制居中文本(移动设备)

来自分类Javascript

如何在d3中的rect元素中居中显示文本?

来自分类Dev

如何在div中绝对定位的元素中居中变长文本?

来自分类Dev

如何在100%宽度的div中水平居中放置绝对位置的元素?

来自分类Dev

matplotlib表中居中的文本

来自分类Dev

在悬停时通过SVG元素显示文本

来自分类Dev

如何在导航栏中垂直居中放置元素和文本

来自分类Dev

如何防止占位符文本在高度较大的输入表单元素中垂直居中?

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    HikariPool-1-连接不可用,对于极小的负载服务器,请求在30000ms之后超时

  3. 3

    OpenJDK的和AdoptOpenJDK的区别

  4. 4

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  5. 5

    java.lang.NoClassDefFoundError:无法初始化类org.bytedeco.javacpp.avutil

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    如何优化在Java中这种方法吗?我得到的时间超限

  8. 8

    错误TS1086:一个存取器不能在角9的环境上下文被声明

  9. 9

    java.lang.NoSuchFieldError的:ACCEPT_CASE_INSENSITIVE_VALUES

  10. 10

    如何在exoplayer中播放本地媒体文件的硬编码内容uri

  11. 11

    Keras提前停止回调错误,val_loss指标不可用

  12. 12

    在JavaScript中删除多个对象键值

  13. 13

    请问Spring事务管理工作与Spring WebFlux?

  14. 14

    未定义:grpc.SupportPackageIsVersion7 grpc.ServiceRegistrar

  15. 15

    如何在Python中将字典拆分成多个字典的列表,所有字典的大小均为N

  16. 16

    在IntelliJ IDEA中并行运行测试用例

  17. 17

    Java的无法解析日期的SimpleDateFormat

  18. 18

    tensorflow:仅在可用val_acc的情况下可以保存最佳模型,跳过

  19. 19

    无法装载动态库“libnvinfer.so.6”

  20. 20

    Java反射错误Java.lang.NoSuchMethodException,但是方法存在

  21. 21

    我在android studio中创建了clicker应用。但是,运行时,应用程序在调用“ incrementCount()”后崩溃。为什么?

热门标签

归档