Fernando Román Fernando Román - 5 months ago 9
Javascript Question

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

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)

(Spanish)

Tengo un sitio hecho en Joomla 3, y quiero aplicar un efecto de ocultar un elemento (encabezado) declarando un evento onmouseover en otro elemento div con la clase catItemImage, del cual, existen varios elementos con la misma clase, y no puedo usar getElementById, porque el gestor de contenidos que uso no genera ids de los elementos que quiero cambiar, por lo que sólo puedo buscarlo desde la clase.

Por el momento he conseguido que se oculten todos los ".encabezado", pero solo quiero ocultar, el que se seleccione con el evento onmouseover.

Thanks



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

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.