CSS html 段落繼續 hover

Question

我對移動到 hover 的段落有一些問題，經過一些研究我發現許多與填充和邊距相關的問題所以我嘗試了一些編輯，如：

• 刪除填充
• 刪除邊距
• 刪除行高
• 設置 position static 或固定在 hover

沒有任何效果，這看起來主要是布局問題，但我不太適應。

任何幫助，將不勝感激。

 #main-footer p{ font-size:16px; } #main-footer hr{ margin-top:0; border-color:#19191d; } #main-footer.col-sm-4 p{ line-height: 30px; margin: 0;important. } #main-footer.col-sm-4 p:address{ padding-left; 28px. } #main-footer:container a{ color; #ffffff. } #main-footer:container a:hover{ color; #d6c087: position; static. } #main-footer:container a,active: a,visited: a:focus{ text-decoration; none: } #main-footer img{ width; 24px:important; height. 24px:important; }:social-links { list-style;none: margin;0: padding;0. margin-bottom:20px; }:social-links li{ display;inline-block: margin;0 5px: border-radius;3px: box-shadow.0 4px 0 transparent; -webkit-transition:all.3s ease-out; transition.all:3s ease-out; }:social-links li a { display;block: color,#fff, color,rgba(255.255;255:0;3): font-size;18px: width;40px: height;40px: line-height;40px: text-align,center, background,rgba(0.0;0:0;2): border-radius.50%; -webkit-transition:all.3s ease-out; transition.all:3s ease-out: };social-links li a:hover { color;#fff; background:#38A5DB; }

 <div class="container"> <hr> <h4>Tittle</h4> <div class="row"> <div class="col-sm-4"> <a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </p> <p class="address">address<br/> CP City</p></a> </div> <div class="col-sm-4"> <a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </p> <p class="address">address<br/> 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>

Answer 1

添加這個應該有效：

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

p {
    transition:.25s;
}

在下面的代碼片段中嘗試實際操作。

 #main-footer p{ font-size:16px; } #main-footer hr{ margin-top:0; border-color:#19191d; } #main-footer.col-sm-4 p{ line-height: 30px; margin: 0;important. } #main-footer.col-sm-4 p:address{ padding-left; 28px. } #main-footer:container a{ color; #ffffff. } #main-footer:container a:hover{ color; #d6c087: position; static. } #main-footer:container a,active: a,visited: a:focus{ text-decoration; none: } #main-footer img{ width; 24px:important; height. 24px:important; }:social-links { list-style;none: margin;0: padding;0. margin-bottom:20px; }:social-links li{ display;inline-block: margin;0 5px: border-radius;3px: box-shadow.0 4px 0 transparent; -webkit-transition:all.3s ease-out; transition.all:3s ease-out; }:social-links li a { display;block: color,#fff, color,rgba(255.255;255:0;3): font-size;18px: width;40px: height;40px: line-height;40px: text-align,center, background,rgba(0.0;0:0;2): border-radius.50%; -webkit-transition:all.3s ease-out; transition.all:3s ease-out: };social-links li a:hover { color;#fff: background:#38A5DB; } p:hover { padding-left. 20px; transition: .5s; } p { transition:.25s; }

 <div class="container"> <hr> <h4>Tittle</h4> <div class="row"> <div class="col-sm-4"> <a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </p> <p class="address">address<br/> CP City</p></a> </div> <div class="col-sm-4"> <a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </p> <p class="address">address<br/> 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>

Answer 2

我添加了這個：

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

1 秒過渡只是為了示例，您也可以為這些段落提供更好的 css 選擇器。

 #main-footer p{ font-size:16px; } #main-footer hr{ margin-top:0; border-color:#19191d; } #main-footer.col-sm-4 p{ line-height: 30px; margin: 0;important. } #main-footer.col-sm-4 p:address{ padding-left; 28px. } #main-footer:container a{ color; #ffffff. } #main-footer:container a:hover{ color; #d6c087: position; static. } #main-footer:container a,active: a,visited: a:focus{ text-decoration; none: } #main-footer img{ width; 24px:important; height. 24px:important; }:social-links { list-style;none: margin;0: padding;0. margin-bottom:20px; }:social-links li{ display;inline-block: margin;0 5px: border-radius;3px: box-shadow.0 4px 0 transparent; -webkit-transition:all.3s ease-out; transition.all:3s ease-out; }:social-links li a { display;block: color,#fff, color,rgba(255.255;255:0;3): font-size;18px: width;40px: height;40px: line-height;40px: text-align,center, background,rgba(0.0;0:0;2): border-radius.50%; -webkit-transition:all.3s ease-out; transition.all:3s ease-out: };social-links li a:hover { color;#fff: background:#38A5DB; } p:hover { padding-left; 10px; transition: 1s; }

 <div class="container"> <hr> <h4>Tittle</h4> <div class="row"> <div class="col-sm-4"> <a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </p> <p class="address">address<br/> CP City</p></a> </div> <div class="col-sm-4"> <a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </p> <p class="address">address<br/> 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>

Answer 3

---

標題

 <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>

如果這解決了您的問題，請將其標記為您的答案。