隱藏的div中href的CSS樣式問題？

Question

我有造型內部的href鏈接問題collapse_content_selector類樣式方法hover-regular ？ 在外部使用href樣式。 但是對於隱藏的div，它沒有樣式。 我不確定是什么原因引起的。 我舉了一個小例子，其中所有視圖都自定義突出顯示，而“測試內部”視圖未突出顯示

代碼示例：

 $(document).ready(function() { $('.nav-toggle').click(function() { var collapse_content_selector = $(this).attr('href'); var toggle_switch = $(this); $(collapse_content_selector).toggle(function() { if ($(this).css('display') == 'none') { toggle_switch.html('View All'); } else { toggle_switch.html('Close'); } }); }); }); 

 .hover-regular { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; position: relative; } .hover-regular:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #007bff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s; transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s; } .hover-regular:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="jumbotron"> <div id="collapse" style="display:none"> <hr> <a class="hover-regular" href="https://mau.se/"> <h5>Test</h5></a> <i>2018-</i><br> <span class="badge badge-pill badge-primary">Test</span> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div> <div class="d-flex justify-content-center"> <a class="nav-toggle hover-regular" href="#collapse">View All</a> </div> </div> 

Answer 1

我認為這就是您要尋找的。 您想要H5上的樣式。 除了H5的正常行為外，它還會display:block; ，因此我通過它進行了display:inline的操作，以確保它只對文本下方的動畫起作用。

請考慮將style添加到CSS中。 我只是這樣做來解釋我所做的更改。

 $(document).ready(function() { $('.nav-toggle').click(function() { var collapse_content_selector = $(this).attr('href'); var toggle_switch = $(this); $(collapse_content_selector).toggle(function() { if ($(this).css('display') == 'none') { toggle_switch.html('View All'); } else { toggle_switch.html('Close'); } }); }); }); 

 .hover-regular { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; position: relative; } .hover-regular:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #007bff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s; transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s; } .hover-regular:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="jumbotron"> <div id="collapse" style="display:none"> <hr> <a href="https://mau.se/"> <h5 class="hover-regular" style="display:inline;">Test</h5></a> <i>2018-</i><br> <span class="badge badge-pill badge-primary">Test</span> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div> <div class="d-flex justify-content-center"> <a class="nav-toggle hover-regular" href="#collapse">View All</a> </div> </div> 

作為補充，這將是一個很好的閱讀： 語義上，這更正確：h2中的a或a中的h2？ 。 這里將說明為什么要考慮在標頭元素內添加a-href。 但是，如果您使用的是HTML5，並且想在ahrefs中設置標題樣式，那么當前的選擇就是一個選擇。

但是我認為在您當前的情況下，最好的選擇是切換a和h5因為您只想在文本上懸停甚至刪除display:block; 部分（如果將a放在h5 ，則沒有必要）。

<h5><a href="https://mau.se/" class="hover-regular">Test</a></h5>

Answer 2

您需要在標簽之外使用h5標簽。 然后內部測試將突出顯示。

  $(document).ready(function() { $('.nav-toggle').click(function() { var collapse_content_selector = $(this).attr('href'); var toggle_switch = $(this); $(collapse_content_selector).toggle(function() { if ($(this).css('display') == 'none') { toggle_switch.html('View All'); } else { toggle_switch.html('Close'); } }); }); }); 

 .hover-regular { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; position: relative; } .hover-regular:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #007bff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s; transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s; } .hover-regular:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="jumbotron"> <div id="collapse" style="display:none"> <hr> <h5> <a class="hover-regular" href="https://mau.se/"> Test</a></h5> <i>2018-</i><br> <span class="badge badge-pill badge-primary">Test</span> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div> <div class="d-flex justify-content-center"> <a class="nav-toggle hover-regular" href="#collapse">View All</a> </div> </div>