CSS Style issue of a href inside hidden divs?

Question

I am having issues with styling a href links inside collapse_content_selector the class style method hover-regular? Works outside with a href styles. But with hidden divs, it's not styled. I am not sure what is causing the issue. I made a small example of where view all is custom highlighted however the Test-inside view all is not highlighted

Code Example:

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

You need to set class *hover-regular* for *h5* – Gerard Dec 04 '18 at 09:08 — Gerard, Dec 04 '18 at 09:08

JeroenE · Accepted Answer · 2018-12-04T10:02:10.110

I think this is what you're looking for. You want the styling on the H5. Beside that the normal behavior of H5 is that it will display:block;, So I made display:inline from it to make sure it'll only do the animation below the text.

Please consider adding the style to your css. I just did this to explain what I changed.

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

This would be a good read as an addition: Semantically, which is more correct: a in h2, or h2 in a?. Here will be explained why you would consider adding the a-href inside the header element. How ever, if you're using HTML5 and want to style the headers within ahrefs then your current option is the one to go.

But I think in your current case the best option is to switch the a and h5 as you only want to have a hover on the text and even remove the display:block; part (which is not necessary if you put the a in the h5).

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

Thank you for the help! – test423456243 Dec 04 '18 at 09:16 — test423456243, Dec 04 '18 at 09:16
No problem, have fun coding. – JeroenE Dec 04 '18 at 09:16 — JeroenE, Dec 04 '18 at 09:16

score 0 · Answer 2 · answered Dec 04 '18 at 09:21

You need to use h5 tag out side the a tag. then Test inside will hightlight.

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

CSS Style issue of a href inside hidden divs?

2 Answers2