Select div 内的一个元素与多个元素相同 class onmouseover

Question

我已经安装了 Joomla 3，我正在尝试 select 来自具有相同 class 的多个元素的一个元素，但是当我在该元素上应用 onmouseover 事件时，该函数会影响具有相同 class 的所有元素=36=]，我希望函数影响 select 元素（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

您需要在回调中传递事件对象。然后您可以使用该事件对象来查找当前对象及其子对象，例如在您的情况下带有 encabezadoclass 的元素。

试试下面的代码。

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

有了我一直在寻找的效果。感谢您的关注。

Select div 内的一个元素与多个元素相同 class onmouseover

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

html

javascript

css

jquery

joomla