Question

我想知道如何在一个阵列中将不同类型的悬停条件应用于不同的孩子？这是我的网站（http://k29315or.beget.tech/），我想为主页上的每张图片制作不同的悬停颜色。谢谢你的帮助！

Answer 1

如果你想要总是不同的颜色，那么这可以帮助你。如果你想为每个盒子保持不同但相同，那么你必须创建一个你想要的颜色数组。你可以问，我也可以为你创造。如果根据您的要求/期望没有工作，请道歉。

＆＃13;

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', '');
});

＆＃13;

.hover-color {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  margin: 10px;
}

＆＃13;

<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>

＆＃13;

Answer 2

假设您的页面中有8个元素，创建一个包含8种不同颜色代码的数组。在元素悬停时获取元素的索引并通过元素索引从数组中获取颜色代码值。在元素中应用该颜色代码。

Answer 3

首先：为您的图像添加不同的类。第二：应用你的风格。

    .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" />

在一个数组中不同的悬停颜色

3 个答案: