选择里面有多种元素于同一类的div元素的onmouseover

Question

我已经安装的Joomla 3和我试着从与同一个类中的多个元素的元素，但是当我在元素上应用onmouseover事件，功能影响与所有元素同一类的，我想要的功能的影响，选择元素（的onmouseover元素）

（西班牙）

我在的Joomla 3做了一个网站，并希望通过声明onmouseover事件到应用效果隐藏的元素（头）在catItemImage，另一个div元素哪一类有在同一个班级几个元素，而不能使用的getElementById因为经理不产生内容使用ID我想改变的元素S，所以我只能从类的样子。

通过我设法隐藏所有“我.encabezado”但我只想躲起来，这与onmouseover事件选择的时间。

感谢

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>

01尝试使用

Answer 1

我有一个CSS固定它：

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

随着我正在寻找的效果。感谢您的关注。

Answer 2

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

INSTEAD OF var itemk2 = document.querySelectorAll(".encabezado");

这应该达到你正在寻找

Answer 3

您需要在回调对象传递事件的影响。然后你就可以使用该事件对象找到与当前对象：比如在你的情况encabezado类子元素。

试试下面的代码。

HTML

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

JS

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

---

工作演示：

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 4

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