Select an element inside div with multiple elements a same class onmouseover

Question

I have installed Joomla 3 and Im trying select an element from multiple elements with the same class, but when I apply onmouseover event on the element, the function affect all elements with same class, I want the function affect to select element (onmouseover element)

 function ocultarDatos() { var itemk2 = document.querySelectorAll(".encabezado"); for (var i = 0; i < itemk2.length; i++) { itemk2[i].style.display = "none"; } }

 <span class="catItemImage" onmouseover="ocultarDatos();"> <a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>"> <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="height:auto;" /> </a> <a rel="author" href="<?php echo $this->item->author->link; ?>"><img class="globo" src="<?php echo $this->item->author->avatar; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($this->item->author->name); ?>" > </a> </span>

 <div class="catItemView groupLeading"> <div class="encabezado"> <div class="catItemBody"> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> </div> </div> <div class="itemContainer itemContainerLast" style="width:12.5%;"> <div class="catItemView groupLeading"> <div class="encabezado"> <div class="catItemBody"> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> </div> </div> </div> </div> </div>

Answer 1

Try using var itemk2 = $(this).find(".encabezado");

instead of var itemk2 = document.querySelectorAll(".encabezado");

This should achieve the effect you are looking for

Answer 2

You need to pass event object in callback. and then you can use that event object to find current object and its child such as element with encabezado class in your case.

Try below code.

HTML

<span class="catItemImage" onmouseover="ocultarDatos(event);">
   ... ...
</span>

JS

function ocultarDatos(event){
    var encabezado = event.currentTarget.querySelectorAll('.encabezado');
    encabezado[0].style.display = "none";
};

---

Working Demo:

 function ocultarDatos(event){ var encabezado = event.currentTarget.querySelectorAll('.encabezado'); encabezado[0].style.display = "none"; }; function ocultarDatosOther(event){ var encabezado = event.currentTarget.querySelectorAll('.encabezado'); encabezado[0].style.display = ""; };

 <div onmouseover="ocultarDatos(event);" onmouseout="ocultarDatosOther(event);"> MouseOver on me. <span class="encabezado"> and i will hide </span> </div>

Answer 3

 <div class="catItemView groupLeading"> <div class="encabezado"> <div class="catItemBody"> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> </div> </div> <div class="itemContainer itemContainerLast" style="width:12.5%;"> <div class="catItemView groupLeading"> <div class="encabezado"> <div class="catItemBody"> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> <div class="clr"></div> </div> </div> </div> </div> </div>

Answer 4

I Have fixed it with CSS:

.encabezado { background: white; padding: 0px 15px; display:none; } .itemContainer:hover .encabezado { padding: 0px 15px; display:block; top: 150px; z-index: 100; } 

With the effect i was searching for. Thanks for you attention.