как я могу дать эффект наведения на перекрывающиеся узлы (z-index) - PullRequest
0 голосов
/ 05 марта 2019
<div class="wrap">
  <div class="col"/>
  <div class="col"/>
  <div class="col"/>
  <div class="col"/>
  <div class="col"/>
  <div class="row"/>
  <div class="row"/>
  <div class="row"/>
  <div class="row"/>
  <div class="row"/>
</div>

и этот столбец и строка перекрываются следующим образом

enter image description here

Я хочу дать эффект наведения обоим элементам. Я пробовал с обработчиком событий jQuery но позади один динамически генерируемый узел поэтому я попробовал что-то вроде этого

$('html').on('mouseover', '-behindOne-', (e) => {
    console.log(e);
});

но event.target был выше перекрывающийся узел
и event.current был HTML
и this было undefined
что я должен делать?


Я хочу изменить background-color.
Я хочу использовать hover event at same time.
каждое парящее событие хорошо работает
но в центре этой картинки
влияние только на верхний (z-индекс)

я тоже так не могу

.wrap:hover .col {}
.wrap:hover .row {}

это должно влиять только на mouseOvered col и row

Я хочу это! ~~

enter image description here

1 Ответ

0 голосов
/ 05 марта 2019

, если вы хотите навести эффект на них обоих

.col:hover{
  //change somethings
}

.row:hover{
  //change somethings
}

но этот код может помочь только для трюков CSS. Вы можете попробовать также с jquery, как

$( ".col" ).mouseover(function() {
  //change somethings
});
$( ".row" ).mouseover(function() {
  //change somethings
});

и, пожалуйста, объясните, что именно вы хотите изменить с помощью эффекта наведения мыши

PLUS div ->

  //this is html block
 <div class=plus>
  <div class="col"/>
  <div class="row"/>
 </div>

   //this is css block
  .plus div:hover{
    background-color:black
  } 
...