Javascript-форум - Добавление/удаление класса элемента при наведении на родительский элемент.

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Добавление/удаление класса элемента при наведении на родительский элемент. (https://javascript.ru/forum/events/34304-dobavlenie-udalenie-klassa-ehlementa-pri-navedenii-na-roditelskijj-ehlement.html)

[решено]Добавление/удаление класса элемента при наведении на родительский элемент.

Доброго времени суток, уважаемые форумчане.
Возникла проблема, так как только начал знакомcтво с JavaScript, с присвоением/удалением классов.
Ситуация такая: имеется что-то типа

<div class="class1">тут текст
    <a href="#" class="class2 hidden">ссылка</a>
</div>

а в css

.hidden {
     display: none !important;
 }

Задача заключается в том, чтобы при наведении на

<div class="class1">...</div>

у ссылки был удалён класс .hidden

<a href="#" class="class2">ссылка</a>

Соответственно, при выходе курсора за предела дива возврат на исходную. Использование jQuery категорически неуместно.
Пожалуйста, помогите новичку. Заранее премногоблагодарен!

P.S.просьба к модераторам, если сообщение не в той теме, перенесите в нужную пожалуйста. если дублируется - отправьте куда нужно. и вам заранее спасибо.

рони, спасибо за информацию, всё предельно ясно.

так?

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      
      .show{
          -webkit-transition: all 1s ease;
            color:red;
           opacity:1;
          }
      
    .hide{
          -webkit-transition: all 1s ease;
        opacity:.5;
    
    }
    </style>
  </head>
  <body>
    
    <div id="hover">hover is on me</div>
    
    <a href="#" id="hide" class="hide">hover me</a>
    
    <script>

function hover (opt) {
	
 opt.elem.onmouseover = ElemMouseAction;	 
 opt.elem.onmouseout = ElemMouseAction;
 	
 function ElemMouseAction (evt) {
  var related, Call;
  var e = evt || event;	 
 
	if(e.type == 'mouseover'){ 
      
	  Call = opt.over; 
	  related = e.relatedTarget || e.fromElement;
	  
	} else {
      
	  Call = opt.out; 
	  related =  e.relatedTarget || e.toElement;
	  
 }
		
			
	while (related && related != this) {
		related = related.parentNode;
		} 
	  
	  if(related == this) return;
	 
	  Call.call(this, e);
	 
	 }	

	
	}
	

var lnk = document.getElementById("hide");      
      
hover({
	elem:document.getElementById('hover'),
	over:function (e) {// срабатывает при mouseover
		
       lnk.className = "show";
      
		},
	out:function (){// срабатывает при mouseout
	
        lnk.className = "hide";
		}	
	
	});	

    </script>

  </body>
</html>

<div class="class1">тут текст
    <a href="#" class="class2 hidden">ссылка</a>
</div>

var a = document.getElementsByClassName('class1');
for(i=0;i<a.length;i++)
{
   a[i].onmouseover = function(){remClass(1,this)};
   a[i].onmouseout = function(){remClass(0,this)};
}

function remClass(a,b)
{
   a ? b.getElementsByTagName('a')[0].class = 'class2' : b.getElementsByTagName('a')[0].class = 'class2 hidden';
}

Ruslan_xDD,
при переходе между вложенным в ссылку элементами будет происходить событие onmouseover и onmouseout

а hover никак ? :)

dmitriymar, вот и я тоже не могу понять, зачем столько возни, когда есть более лёгкие способы. :)