I have 2 classes one is .bot class and 2nd is .tools class. On click of filter-button class I am trying to activate (display) tools class which has dropdown button. For some reason this is not working for me.
Here is my scss code
.bot {
&:active {
.tools {
display: block;
}
}
}
Here is my html code
<button class="bot" (click)="toggleFilters()">Filter <fa-icon [icon]="filter">
</fa-icon>
</button>
<div class="demos">
<div class="tools"
*ngIf="Data.length > 1">
</div>
Try using this instead
.filter-button {
&:active {
+ .demos {
.tools {
display: block;
}
}
}
}
note the + selector
Related
I want to shrink my paragraph into a couple of read more, without the need to read less.
I only manage to do it once and 'm now lost.
.bio {
font-family: monospace;
}
#check {
display: none;
}
#check:checked~.more {
display: block;
}
.more {
display: none;
}
label {
color: rgb(0, 0, 0);
cursor: pointer;
font-weight: bold;
text-decoration: underline;
}
<div class="bio">
<input type="checkbox" id="check">
<p>craftsman</p> *original display*
<div class="more">
<p>since birth has always had a love/hate relationship</p> *first readmore*
</div>
<label for="check"> more</label>
<div class="more">
<p>She had half-survived blahblahblah.</p> *second readmore*
</div>
</div>
Make all elements with the class more hidden by using: .more { display: none }
Create a class to make elements visible again: .d-block { display: block }
Create a Node List in JS with all elements with the class more: let bio_sections = document.querySelectorAll('.more')
Create a variable at 0 as index: let bio_index = 0
Add a click-eventListener linked to the button: button-element.addEventListener('click', () => { ... })
Within the function create an if-condition to ensure that the actual function is only as often run as you have elements with the class more as otherwise, you will create an error after every further button click: if (bio_index < bio_sections.length)
select the element out of the Node List with the current index: bio_sections[bio_index]
Add that previously created class to that element: .classList.add('d-block')
Increase the index to jump to the next element within your Node List: bio_index++
let button = document.querySelector('.bio button');
let bio_sections = document.querySelectorAll('.bio .more');
/* index to iterate */
let bio_index = 0;
//trigger to check for button clicks
button.addEventListener('click', function() {
// ensures JS errors as otherwise elements going to be called that does not exist
if (bio_index < bio_sections.length) {
// makes the section visible
bio_sections[bio_index].classList.add('d-block');
//increases the index onclick
bio_index++;
}
})
.more {
display: none;
}
.d-block {
display: block;
}
button {
display: block;
margin-top: 2em;
}
<div class="bio">
<p>craftsman</p> *original display*
<div class="more">
<p>since birth has always had a love/hate relationship</p> *first readmore*
</div>
<div class="more">
<p>She had half-survived blahblahblah.</p> *second readmore*
</div>
<button>Read more about craftsman</button>
</div>
I tried many ways but it's not working. I just need a simple button that is visible only on hover.
I have this:
<div class = "input-edit">
<button type = "button" class = "edit-button">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
Edit:
SOLUTION:
.input-edit{opacity: 0} .input-edit:hover{opacity: 1 }
CSS is the way to go and as Prakash suggested, that could be one nice approach, use opacity and you can even use a transition to make the effect smooth
.input-edit {
opacity: 0;
transition: opacity 0.5s ease;
}
.input-edit:hover {
opacity: 1;
}
The display: none; property would not work because otherwise the button would not exist. In this case you can give the button an opacity: 0; and for hovering an opacity: 1;.
Here's the code:
.input-edit {
opacity: 0;
transition: all 0.2s; /* Use a transition if you want */
}
.input-edit:hover {
opacity: 1;
}
<div class = "input-edit">
<button type = "button" class = "edit-button">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
you can use display: none; property
.edit-button{
display: none;
}
.input-edit {
min-height:50px;
}
.input-edit:hover .edit-button{
display: block;
}
<div class = "input-edit">
<button type = "button" class = "edit-button">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
</div>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
<div class = "myDIV">Edit</div>
<button type = "button" class = "edit-button hide">
<mat-icon class = "material-icons"> edit </mat-icon>
</button>
How to better write this code with three translations? I want to use only one class with three translations instead of three class, my code:
.test > li.nav-item:lang(en):nth-child(1):after {
content: "BNM";
margin-left: 10px;
}
.test > li.nav-item:lang(fr):nth-child(1):after {
content: "XYZ";
margin-left: 10px;
}
.test > li.nav-item:lang(pl):nth-child(1):after {
content: "YUI";
margin-left: 10px;
}
i want something like this:
.test > li.nav-item:nth-child(1)
&:lang(en):after {}
&:lang(fr):after {}
&:lang(pl):after {}
or something like this
Without a preprocessor you can reduce the code using a CSS variable, e.g.
:lang(en) { --label: "BNM"; }
:lang(fr) { --label: "XYZ"; }
:lang(pl) { --label: "YUI"; }
li.nav-item:nth-child(1)::after {
margin-left: 10px;
content: var(--label);
}
<ul class="test" lang="pl">
<li class="nav-item">1</li>
<li class="nav-item">2</li>
<li class="nav-item">3</li>
</ul>
If no lang attribute is defined then the --label variable will be undefined and will not be written in the ::after pseudoelement.
#hello{
font-size: 4em;
}
div.about{
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext"><span id="hello">Hello!</span></pre>
<div class="about" id="about"><p>hello</p></div>
First of all, I am new to stackoverflow. Secondly, I want to over a specific part of a paragraph, the span, and then let this div appear. But it doesnt seem to work..
You dont have to use javascript:
#hometext:hover + #about { display:none; }
I am not quite sure if this is what you asked for, but you can utilize the span element's onmouseover and onmouseout attributes.
With a little bit of javascript, you can achieve what I think you want to do:
function hideDiv() {
document.getElementById("divToHide").style.visibility = 'hidden';
}
function showDiv() {
document.getElementById("divToHide").style.visibility = 'visible';
}
#divToHide {
height: 100px;
width: 100px;
background: red;
}
#hoverMe {
cursor: pointer;
}
<div id="divToHide">
</div>
<br />
<p>
This is a paragraph. If you hover <span id="hoverMe" onmouseover="hideDiv()" onmouseout="showDiv()">here</span>, it will hide the red box.
</p>
I think you need some javascript there:
function showOtherDiv() {
document.getElementById("about").style.display = "block";
}
function hideOtherDiv() {
document.getElementById("about").style.display = "none";
}
#hello {
font-size: 4em;
}
div.about {
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext">
<span id="hello" onmouseover="showOtherDiv()" onmouseout="hideOtherDiv()">Hello!</span>
</pre>
<div class="about" id="about">
<p>hello</p>
</div>
Here is a codepen
<div class="data-row data-has-detail">
...
</div>
After expanding the div class becomes
<div class="data-row data-has-detail data-detail-shown">
...
</div>
I am trying to change the chevron on toggle with css but it doesn't work
<div class="btn-actions">
<span class="show-detail-new toggle-detail text-primary chk-move-down">
<span class="span-show-details"><i class="fa fa-2x fa-chevron-circle-down"></i></span>
<span class="span-hide-details"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</span>
</div>
less code
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
}
.data-has-detail .data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
Toggle with css not working
When an element has multiple classes, you select them like so:
.data-has-detail.data-detail-shown
(No space - the space tells it it's a child element, no space says "this element has both classes)
Update - with LESS
Since you are using LESS, then the primary issue is the one I mentioned about spaces between selectors. In LESS you solve that with the & symbol, like so:
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
/** the & will cause it to be ".data-has-detail.data-detail-shown" **/
&.data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
}
As an observation under the heading of "maintainable code", and for performance, I'd suggest finding a way to simplify this. Something like this would be a bit less verbose, and should work:
.show-detail-new {
.span-show-details {
display: block;
}
}
.show-detail-new {
.span-hide-details {
display: none;
}
}
.data-detail-shown {
.span-show-details {
display: none;
}
}
.data-detail-shown .span-hide-details {
display: block;
}
(Currently, your selectors blow out into a huge selector when compiled by LESS, so your CSS stylesheet is probably larger than it needs to be:
.data-has-detail .data-detail-shown .show-detail-new span.span-show-details {
display: none;
}
.... etc for other rules ...