在鼠标悬停时选择具有多个元素的 div 中的一个元素同一个类

Question

我已经安装了 Joomla 3 并且我尝试从具有相同类的多个元素中选择一个元素，但是当我在元素上应用 onmouseover 事件时，该函数影响具有相同类的所有元素，我希望该函数影响选择元素（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>

Answer 1

尝试使用var itemk2 = $(this).find(".encabezado");

而不是var itemk2 = document.querySelectorAll(".encabezado");

这应该达到您正在寻找的效果

Answer 2

您需要在回调中传递事件对象。 然后您可以使用该事件对象来查找当前对象及其子对象，例如在您的情况下具有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 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

我已经用 CSS 修复了它：

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

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