How to leave a modified structure with :active effect

Asked

Viewed 42 times

-1

Guys, I made the following code and I am in doubt with the pseudo-classes, in case I created buttons but the change of the :active effect only happens while I keep cursor pressed, there is some way to keep that change until another button is selected?

Below is the code + css.

.box {
	width: 500px;
	border: 10px solid whitesmoke;
	padding: 25px;
	display: block ruby;
}

a.dados {
	background: url(https://i.ibb.co/MSCwHBz/do-utilizador.png);
	width: 40px;
	height: 40px;
	background-size: 40px;
	display: block;
	background-color: #f0eaea;
	padding: 5px;
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid #8080802e;
}

a.bio {
	background: url(https://i.ibb.co/Y0BCMpW/livro.png);
	width: 40px;
	height: 40px;
	background-size: 34px;
	display: block;
	background-color: #f0eaea;
	padding: 5px;
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid #8080802e;
	margin: 2.5px;
}

a.rel {
	background: url(https://i.ibb.co/LPgTZQJ/protecao.png);
	width: 40px;
	height: 40px;
	background-size: 34px;
	display: block;
	background-color: #f0eaea;
	padding: 5px;
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid #8080802e;
	margin: 2.5px;
}

a.inv {
	background: url(https://i.ibb.co/grLSV8N/caixa.png);
	width: 40px;
	height: 40px;
	background-size: 34px;
	display: block;
	background-color: #f0eaea;
	padding: 5px;
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid #8080802e;
	margin: 2.5px;
}

#dados {
	background: green;
	width: 496px;
	height: 200px;
	position: absolute;
	margin-top: 52px;
	margin-left: -7px;
	border: 2px solid #dcd7d7;
}

#bio {
	background: #bf0606;
	width: 496px;
	height: 200px;
	position: absolute;
	margin-top: 55px;
	margin-left: -63px;
	border: 2px solid #dcd7d7;
	display: none;
}

#rel {
	background: #0f42dd;
	width: 496px;
	height: 200px;
	position: absolute;
	margin-top: 55px;
	margin-left: -122px;
	border: 2px solid #dcd7d7;
	display: none;
}

#inv {
	background: #b55029;
	width: 496px;
	height: 200px;
	position: absolute;
	margin-top: 55px;
	margin-left: -181px;
	border: 2px solid #dcd7d7;
	display: none;
}

a.dados:active {
	background-color: #978f8f;
}

a.bio:active {
	background-color: #978f8f;
}

a.rel:active {
	background-color: #978f8f;
}

a.inv:active {
	background-color: #978f8f;
}

a.inv:active #inv {
	display: block; !important
}
<div class="box">
<a class="dados"><div id="dados"></div></a>
<a class="bio"><div id="bio"></div></a>
<a class="rel"><div id="rel"></div></a>
<a class="inv"><div id="inv"></div></a>
<div class="cred"></div>
</div>

css hover

  • What exactly do you want? change the color when you hover over the object? Use :Hover to do this. If you want to click and show another color, use javascript with the html onclick event

  • No, the color was just a test, I wanted to make the #div visible while not changing the option.

  • To make a div visible with CSS use display: block. To hide will be display: None. By intending to do this while not changing option can do through javascript. In the html tag you add onclick="function", and in the javascript you call this function and change the tag display type

1 answer

0


One way to do this is by controlling via Javascript.

For this you can add a click event on the links (tag <a ...>), when this event is triggered add a class in the link that was clicked and remove that class from the other links.
See the example below, in it I try to explain the code with the comments.

/// ; Busca o elemento com a classe `box`
var box = document.querySelector('.box'),
/// ; Busca os elementos quem tem a tag `A` que estão dentro do elemento `box`
    meusLinks = box.querySelectorAll('A');
    
/// ; Para cada `A` adiciona o evento de onclick
meusLinks.forEach(function( a ){ 
   a.addEventListener('click',onCliqueiNoLink);
});



/// ; Evento de onclick
function onCliqueiNoLink(){
  
  /// ; `this` dentro dessa função é a tag `A` que foi clicada.
  console.log( this , this.parentNode );

  /// ; Pega o 'pai' do link clicado, ou seja, o elemento de classe `box`
  this.parentNode
  /// ;  busca por todos os elementos de tag `A` dentro dele
      .querySelectorAll( 'A' ) 
  /// ;  remove a classe `active` desses `A`
      .forEach( function( a ){
         a.classList.remove('active');
      });
  
  /// ; adiciona classe `active` no link clicado
  this.classList.add('active');
}
A{ display:inline-block; width: 20px; height: 20px; background: yellow; }

A.active{
   background: red;
}
<div class="box">
    <a class="dados"></a>
    <a class="bio"></a>
    <a class="rel"></a>
    <a class="inv"></a>
    <div class="cred"></div>
</div>

References:

querySelector, querySelectorAll, classList, addEventListener.

Browser other questions tagged css hover

You are not signed in. Login or sign up in order to post.