Question

这是我页面mintrain.co.uk/indexsp

的链接

因此，对于首页，我将四个类别的宽度设置为25％。最重要的是，我将悬停时的宽度加倍到50％。悬停时，最右边的div被推到其他下方。如何使用CSS防止这种情况？我本来想使非悬停的div宽度减小（到16％），但是我不知道该如何实现。任何帮助都会很棒。

Answer 1

我建议使用function processJsonToSumValues(input, addingArray) { console.log("input", input); console.log("addingArray",addingArray); input.forEach(function(item, index) { console.log("item", item); console.log("index",index); for (let key in item) { // for numbers onlyyy if (typeof item[key] === 'number') { addingArray[index][key] = (addingArray[index][key] || 0) + item[key] } if (Array.isArray(item[key])) { console.log("input[index][key]", input[index][key]); console.log("addingArray[index][key]",addingArray[index][key]); processJsonToSumValues(input[index][key], addingArray[index][key]) } } }) }。只需将flexbox添加到容器中，然后将display: flex添加到子容器中即可进行所需的布局。然后将更大的flex: 1值添加到flex中。像这样：

:hover

.container {
  display: flex;
}

.link {
  flex: 1;
  
  /* For demo only */
  border: 1px solid #000;
  height: 40px;
  transition: 1s all;
}

.link:hover {
  flex: 1.5; /* Or any other value */
}

对于您的网站，只需将<div class="container"> <div class="link"></div> <div class="link"></div> <div class="link"></div> <div class="link"></div> </div>替换为.container，将.boxes替换为.link（这在您的网站上不是有效的HTML，具有多个相同的ID）

悬停时div宽度增加（不替换嵌入式div）

1 个答案: