選擇裏面有多種元素於同一類的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>