Я хотел бы знать, как я могу применить различные типы условий наведения к разным дочерним элементам в одном массиве? Здесь находится мой веб-сайт (http://k29315or.beget.tech/), и я хочу сделать другое наведение мыши цвет для каждой картинки на главной странице. Спасибо за помощь!

-1
Elena Ivinskaya 1 Мар 2018 в 10:14

3 ответа

Лучший ответ

Если вы хотите всегда разные цвета, то это может помочь. Если вы хотите сохранить разные, но одинаковые для каждого поля, то вы должны создать массив цветов, которые вы хотите. Вы можете спросить, я могу создать это и для вас. Извините, если это не сработало в соответствии с вашими требованиями / ожиданиями.

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  
  return color;
}


$('.hover-color').on('mouseover', function () {  
  $(this).css('background-color', getRandomColor());
});
$('.hover-color').on('mouseout', function () {  
  $(this).css('background-color', '');
});
.hover-color {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover-color"></div>
<div class="hover-color"></div>
<div class="hover-color"></div>
<div class="hover-color"></div>
<div class="hover-color"></div>
<div class="hover-color"></div>
1
w3debugger 1 Мар 2018 в 08:16

Во-первых: добавьте различные классы для ваших изображений. Второе: примените свои стили.

    .hover_behavior_1:hover { border: 4px solid #000088; }
    .hover_behavior_2:hover { border: 8px solid #555555; }
    .hover_behavior_3:hover { border: 16px solid #990000; }
    <img src="https://upload.wikimedia.org/wikipedia/ru/6/6d/Ia_scr.jpg" class="hover_behavior_1" />
    <img src="https://upload.wikimedia.org/wikipedia/ru/6/6d/Ia_scr.jpg" class="hover_behavior_1" />
    <img src="https://upload.wikimedia.org/wikipedia/ru/6/6d/Ia_scr.jpg" class="hover_behavior_2" />
    <img src="https://upload.wikimedia.org/wikipedia/ru/6/6d/Ia_scr.jpg" class="hover_behavior_3" />
-2
A. Denis 1 Мар 2018 в 07:28

Допустим, у вас есть 8 элементов на странице, создайте массив с 8 различными цветовыми кодами. При наведении на элемент получить индекс элемента и получить значение кода цвета из массива через индекс элемента. Примените этот цветовой код в элементе.

-1
omui 1 Мар 2018 в 07:32