jQuery efekt mgły, wyłączonego elementu

Question

Cześć, potrzebuję uzyskać taki efekt że wybrany przeze mnie wiersz tabeli, będzie na starcie przyciemniony, za mgłą, nieaktywny. A po najechaniu myszką na ten element (wiersz tabeli) będzie się rozjaśniał i poprzedni efekt będzie znikał.

Wie ktoś jak coś takiego napisać ? bo niestety ja nigdy nie pracowałem na tyle z jQuery aby to zrobić samemu.

z góry dziękuję za każdą formę pomocy. 

Answer 1

A do czego jQuery?

<table>
  <caption>Lista osób</caption>
  <tr>
    <th>Lp.</th>
    <th>Imię</th>
  </tr>
  <tr class="cover">
    <td>1</td>
    <td>Adam</td>
  </tr>
</table>

.cover{
  filter: blur(3px);
  transition: filter .2s ease-in;
}
.cover:hover{
  filter: blur(0);
}

Chyba, że po najechaniu chcesz aby efekt znikł w ogóle, wtedy kombinuj coś z https://api.jquery.com/hover/

Comments

SUPER!!!, wielkie dzięki! takiej opcji nie brałem nawet pod uwagę.

jak zawsze prostota wygrywa.

Answer 2

document.addEventListener ("DOMContentLoaded", start);

function start(){
	createEventListener();
}

function createEventListener(){
var nodes = document.QuerySelectorAll("tr");
console.log(nodes);
nodes.forEach((nodes) => { nodes.addEventListener("click",
														function(e) {
														something(e)
														});
													});
}
function something(e){
if (myModule.apiStart){
myModule.flush();
}
var children = e.childNodes;
children.forEach( (node) => {node.style.background="black";});
myModule.setNode(e);
myModule.setApiStarted(true);
}

var myModule = function() {
this.activedNode;
this.apiStart = false;
this.setNode = function (node){
this.activedNode = node;
}
this.setApiStarted = function(bool){
this.apiStart = bool;
}
this.flush = function(){
this.activedNode.style.background = "none";
}
}
Plus minus coś takiego, przepisz go sobie na ładniejszy kod :)