Me gustaría saber cómo puedo aplicar diferentes tipos de condición de desplazamiento a diferentes hijos en una matriz. Aquí está mi sitio web (http://k29315or.beget.tech/) y quiero hacer un vuelo estacionario diferente color para cada imagen en la página principal. ¡Gracias por la ayuda!

-1
Elena Ivinskaya 1 mar. 2018 a las 10:14

3 respuestas

La mejor respuesta

Si quieres colores siempre diferentes, entonces esto puede ayudarte. Si desea mantener lo diferente pero igual para cada cuadro, debe crear una variedad de colores que desee. Puedes preguntar, yo también puedo crear eso para ti. Disculpas si esto no funcionó según su requisito / expectativa.

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 mar. 2018 a las 08:16

Primero: agregue diferentes clases a sus imágenes. Segundo: aplica tus estilos.

    .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 mar. 2018 a las 07:28

Digamos que tiene 8 elementos en su página, cree una matriz con 8 códigos de color diferentes. Al pasar el cursor sobre el elemento, obtenga el índice del elemento y obtenga el valor del código de color de la matriz a través del índice del elemento. Aplica ese código de color en el elemento.

-1
omui 1 mar. 2018 a las 07:32