Форум

sazhyk · #1 (**permalink**) 28.12.2012, 17:53

Доброго времени суток, уважаемые форумчане.
Возникла проблема, так как только начал знаком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.просьба к модераторам, если сообщение не в той теме, перенесите в нужную пожалуйста. если дублируется - отправьте куда нужно. и вам заранее спасибо.

рони · #2 (**permalink**) 28.12.2012, 18:18

sazhyk,
http://learn.javascript.ru/mousemove-events

sazhyk · #3 (**permalink**) 29.12.2012, 11:23

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

cyber · #4 (**permalink**) 29.12.2012, 11:48

так?

<!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>

ruslan_mart · #5 (**permalink**) 30.12.2012, 12:30

<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';
}

cyber · #6 (**permalink**) 30.12.2012, 13:09

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

dmitriymar · #7 (**permalink**) 30.12.2012, 14:20

а hover никак ?

ruslan_mart · #8 (**permalink**) 30.12.2012, 14:29

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

Форум

Справочник

Discord чат

Курсы javascript