efekt hover + wychodzący napis[JS]

Question

Witam jestem laikiem jeśli chodzi o js chciałbym zrobić następujący efekt , po najechaniu na obszar sekcji o wysokości 100vh chciałbym osiągnąć efekt przyciemnienia oraz wyjścia napisu na środku ekranu . 

Kombinowałem coś w stylu (to pewnie nie trzyma się kupy 

 

var section = document.getElementsByClassName("first-section"); 
var hover = document.getElementsByClassName("first-section-hover");
	.section.onclick = function(){
		section.addClass ="first-section-hover";
	}
	
)

zdefiniowałem w arkuszach styl dla klas których użyłem czyli : 

first-section jest to sekcja rozciągnięta prawie na cały ekran 

first-section-hover przyciemnienie z delikatnym przejściem .

Jeśli znalazłby się jakiś ogarnięty kolega byłbym bardzo wdzięczny 

Z góry dzięki :) 

Comments

Ty to musisz zrobić w JS?

czy chcesz zrobić w JS?

czy nie wiesz, że można zrobić bez JS? :P

Answer 1

chciałbym zrobić z jsem bo zamierzam się powoli tego uczyć .

Answer 2

Takie "najechanie na coś" to aż szkoda robić JS skoro można łatwiej ;)

Napisałeś w pytaniu, że po najechaniu chciałbyś taki efekt, ale jednak jakieś "onclick" masz w kodzie, więc może w ramach nauki przyciemnić tło i pokazać napis po kliknięciu w jakiś obszar?

• onclick powinieneś zamienić na addEventListener bo tak podpinamy zdarzenia w JavaScript.
• addClass() też nie ma w JS, ale za to jest w jQuery, więc nie wiem z jakiej racji masz namieszane.

Odsyłam Cię do fajnego kursu JavaScript od podstaw, tam dowiesz się jak uzyskać taki efekt, jak i inne jakieś trudniejsze http://kursjs.pl/