CSS html段落悬停移动

我对一个段落在悬停状态下移动存在一些问题，经过一些研究，我发现许多问题与填充和边距有关，所以我尝试了一些编辑，如：

• 除去衬垫
• 删去页边
• 删除线条高度的步骤
• 将位置设置为静态或固定悬停

没什么用，这看起来像是一个布局问题，但我不是很适应它

任何帮助都将不胜感激

#主页脚p{
字体大小：16px；
}
#主页脚hr{
边际上限：0；
边框颜色：#19191d；
}
#主页脚col-sm-4 p{
线高：30px；
边距：0！重要；
}
#主页脚。col-sm-4页地址{
左侧填充：28px；
}
#主页脚。容器a{
颜色：#ffffff；
}
#主页脚。容器a：悬停{
颜色：#d6c087；
位置：静态；
}
#主页脚。容器a:活动，a:已访问，a:焦点{
文字装饰：无；
}
#主页脚img{
宽度：24px！重要；
高度：24px！重要；
}
.社会联系{
列表样式：无；
保证金：0；
填充：0；
边缘底部：20px；
}
.社会联系李{
显示：内联块；
利润率：0.5px；
边界半径：3px；
长方体阴影：0 4px 0透明；
-webkit过渡：所有.3s都很轻松；
过渡：全部。3放松；
}
.社会联系{
显示：块；
颜色：#fff；
颜色：rgba（255255,0.3）；
字号：18px；
宽度：40px；
高度：40px；
线高：40px；
文本对齐：居中；
背景：rgba（0,0,0,0.2）；
边界半径：50%；
-webkit过渡：所有.3s都很轻松；
过渡：全部。3放松；
}
.社交链接li a:悬停{
颜色：#fff；
背景：#38A5DB；
}

窃窃私语
    <div class="row">
        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
            CP City</p></a>

        </div>

        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
                CP City</p></a>

        </div>
        
        <div class="col-sm-4 text-right">
            <ul class="social-links">
                <li class="scrollimation fade-right d4"><a href=""><i class="fa fa-instagram fa-fw"></i></a></li>
                <li class="scrollimation fade-right d3"><a href=""><i class="fa fa-facebook fa-fw"></i></a></li>
            </ul>
            <p>Footer copyright</p>
        </div>
        
    </div>
    
</div>





页脚版权

我添加了以下内容：

p:hover {
  padding-left: 10px;
  transition: 1s;
}

1秒的转换只是一个例子，你也可以为这些段落提供更好的css选择器

#主页脚p{
字体大小：16px；
}
#主页脚hr{
边际上限：0；
边框颜色：#19191d；
}
#主页脚col-sm-4 p{
线高：30px；
边距：0！重要；
}
#主页脚。col-sm-4页地址{
左侧填充：28px；
}
#主页脚。容器a{
颜色：#ffffff；
}
#主页脚。容器a：悬停{
颜色：#d6c087；
位置：静态；
}
#主页脚。容器a:活动，a:已访问，a:焦点{
文字装饰：无；
}
#主页脚img{
宽度：24px！重要；
高度：24px！重要；
}
.社会联系{
列表样式：无；
保证金：0；
填充：0；
边缘底部：20px；
}
.社会联系李{
显示：内联块；
利润率：0.5px；
边界半径：3px；
长方体阴影：0 4px 0透明；
-webkit过渡：所有.3s都很轻松；
过渡：全部。3放松；
}
.社会联系{
显示：块；
颜色：#fff；
颜色：rgba（255255,0.3）；
字号：18px；
宽度：40px；
高度：40px；
线高：40px；
文本对齐：居中；
背景：rgba（0,0,0,0.2）；
边界半径：50%；
-webkit过渡：所有.3s都很轻松；
过渡：全部。3放松；
}
.社交链接li a:悬停{
颜色：#fff；
背景：#38A5DB；
}
p:悬停{
左侧填充：10px；
过渡：1s；
}

窃窃私语
    <div class="row">
        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
            CP City</p></a>

        </div>

        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
                CP City</p></a>

        </div>
        
        <div class="col-sm-4 text-right">
            <ul class="social-links">
                <li class="scrollimation fade-right d4"><a href=""><i class="fa fa-instagram fa-fw"></i></a></li>
                <li class="scrollimation fade-right d3"><a href=""><i class="fa fa-facebook fa-fw"></i></a></li>
            </ul>
            <p>Footer copyright</p>
        </div>
        
    </div>
    
</div>





页脚版权

---

窃窃私语

    <div class="row">
        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
            CP City</p></a>

        </div>

        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
                CP City</p></a>

        </div>
        
        <div class="col-sm-4 text-right">
            <ul class="social-links">
                <li class="scrollimation fade-right d4"><a href=""><i class="fa fa-instagram fa-fw"></i></a></li>
                <li class="scrollimation fade-right d3"><a href=""><i class="fa fa-facebook fa-fw"></i></a></li>
            </ul>
            <p>Footer copyright</p>
        </div>
        
    </div>
    
</div>

页脚版权

---

如果这解决了您的问题，请将其标记为您的答案。

添加此选项应该可以：

p:hover {
    padding-left: 20px;
    transition: .5s;
}

p {
    transition:.25s;
}

请在下面的代码片段中尝试使用它

#主页脚p{
字体大小：16px；
}
#主页脚hr{
边际上限：0；
边框颜色：#19191d；
}
#主页脚col-sm-4 p{
线高：30px；
边距：0！重要；
}
#主页脚。col-sm-4页地址{
左侧填充：28px；
}
#主页脚。容器a{
颜色：#ffffff；
}
#主页脚。容器a：悬停{
颜色：#d6c087；
位置：静态；
}
#主页脚。容器a:活动，a:已访问，a:焦点{
文字装饰：无；
}
#主页脚img{
宽度：24px！重要；
高度：24px！重要；
}
.社会联系{
列表样式：无；
保证金：0；
填充：0；
边缘底部：20px；
}
.社会联系李{
显示：内联块；
利润率：0.5px；
边界半径：3px；
长方体阴影：0 4px 0透明；
-webkit过渡：所有.3s都很轻松；
过渡：全部。3放松；
}
.社会联系{
显示：块；
颜色：#fff；
颜色：rgba（255255,0.3）；
字号：18px；
宽度：40px；
高度：40px；
线高：40px；
文本对齐：居中；
背景：rgba（0,0,0,0.2）；
边界半径：50%；
-webkit过渡：所有.3s都很轻松；
过渡：全部。3放松；
}
.社交链接li a:悬停{
颜色：#fff；
背景：#38A5DB；
}
p:悬停{
左侧填充：20px；
过渡：.5s；
}
p{
过渡：.25s；
}

窃窃私语
    <div class="row">
        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
            CP City</p></a>

        </div>

        <div class="col-sm-4">
            <a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
            
            <p class="address">address
                CP City</p></a>

        </div>
        
        <div class="col-sm-4 text-right">
            <ul class="social-links">
                <li class="scrollimation fade-right d4"><a href=""><i class="fa fa-instagram fa-fw"></i></a></li>
                <li class="scrollimation fade-right d3"><a href=""><i class="fa fa-facebook fa-fw"></i></a></li>
            </ul>
            <p>Footer copyright</p>
        </div>
        
    </div>
    
</div>