Question

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

（西班牙语）

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 loquesólopuedo 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。

由于

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

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

Answer 4

我已经用CSS修复了它：

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

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

在div中选择一个元素，其中多个元素与onmouseover相同

4 个答案: