0

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

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

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

Спасибо.

1
  • span нужен только для определения цвета? Почему нельзя цвет указать в атрибуте data-color? Commented 18 июл. 2018 в 20:10

2 ответа 2

1

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

Вот так:

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>

0
0

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

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>

2
  • спасибо большое, сработало) Commented 18 июл. 2018 в 20:31
  • @VikaBielova, нажмите тогда галочку, что бы принять ответ ;)
    – ThisMan
    Commented 18 июл. 2018 в 20:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.