изменить цвет родителя на дочерний при наведении

290

14 сентября 2018, 13:20

Всем доброго времени суток!
Подскажите пожалуйста, нужно чтобы при наведении на div применялся цвет span.

<div class="rhcfucw-has-events">10 
  <span id="rhcfucw-style" style="background-color: #e900f8"> 
  </span> 
</div>

Указать конкретно на цвет #e900f8 нельзя, так как разных span много.

Спасибо.

Answer 1

Например, вот так:

const divs = $('.rhcfucw-has-events'); 
 
divs.hover(function() { 
    const child = $(this).children()[0]; 
    $(this).css('background-color', $(child).css('background-color')); 
}, function() { 
    const $this = $(this); 
    $this.css('background-color', ''); 
});

span { 
   display: block; 
   width: 150px; 
   height: 50px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="rhcfucw-has-events">10 
    <span id="rhcfucw-style" style="background-color: #e900f8"> 
     </span>    
</div> 
<div class="rhcfucw-has-events">11 
    <span id="rhcfucy-style" style="background-color: #fa0960"> 
     </span>    
</div> 
<div class="rhcfucw-has-events">12 
    <span id="rhcfucz-style" style="background-color: #3f20f8"> 
     </span>    
</div>

Answer 2

изменить цвет родителя на дочерний при наведении

Вот так:

var d = document.querySelector('.rhcfucw-has-events') 
 
d.addEventListener('mouseover', function(e) { 
// Меняет родительский цвет на дочерний 
  this.style.backgroundColor = e.target.style.backgroundColor 
}) 
 
d.addEventListener('mouseout', function(e) { 
// Возвращает родительский цвет 
  this.style.backgroundColor = '' 
})

.rhcfucw-has-events { 
  height: 50px; 
  background: yellow; 
} 
 
.rhcfucw-style { 
  width: 100px; 
  height: 20px; 
  display: inline-block; 
}

<div class="rhcfucw-has-events">10 
  <span class="rhcfucw-style" style="background-color: #e900f8"> 
child 1 
</span> 
 
  <span class="rhcfucw-style" style="background-color: #eee">Child 2</span> 
</div>

UPD:

var dd = document.querySelectorAll('.rhcfucw-has-events') 
 
dd.forEach(function(d) { 
  d.addEventListener('mouseover', function(e) { 
    // Меняет родительский цвет на дочерний 
    if (e.target.children.length) 
      this.style.backgroundColor = e.target.children[0].style.backgroundColor 
  }) 
 
  d.addEventListener('mouseout', function(e) { 
    // Возвращает родительский цвет 
    this.style.backgroundColor = '' 
  }) 
})

.rhcfucw-has-events { 
  height: 50px; 
  background: yellow; 
  margin-bottom: 5px; 
} 
 
.rhcfucw-style { 
  width: 100px; 
  height: 20px; 
  display: inline-block; 
}

<div class="rhcfucw-has-events">10 
  <span class="rhcfucw-style" style="background-color: #e900f8"> 
child 1 
</span> 
 
</div> 
<div class="rhcfucw-has-events">10 
  <span class="rhcfucw-style" style="background-color: #e9fff8"> 
Child 1 
</span> 
 
</div> 
 
<div class="rhcfucw-has-events">10 
  <span class="rhcfucw-style" style="background-color: #eee">Child 1</span> 
 
</div>