I want to hide my CSS triangle which is attached to a div using :before
, and I came across this solution to implement: https://stackoverflow.com/a/11354393/998117
However, my jQuery is not working:
$(".contact input[type='submit']").click(function(event) {
event.preventDefault();
$(".contact .inner").addClass("hidden");
...
(Yes, it does get called.)
This is what my CSS/SASS looks like:
.contact {
background: #3c6ea5;
color: #fff;
display: none;
height: 500px;
.hidden:before {
display: none;
}
.inner {
margin: auto;
padding-top: 20px;
position: relative;
width: 400px;
&:before {
border: solid;
border-color: #3c6ea5 transparent;
border-width: 14px 16px 0 16px;
bottom: -107px;
content: "";
display: block;
position: absolute;
right: -50px;
}
.hidden:before {
display: none;
}
}
...
Why is it not hiding it? What am I doing wrong?
Your Sass is off just a little bit, should be:
.inner {
&.hidden:before {
display: none;
}
}
Notice the & before hidden
Try below code to solve your problem:
.inner { &:before {
.hidden & { display:none;}}}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.