与flex-wrap碰撞的情况：在增加宽度onHover时换行

问题描述 投票：0回答：1

我有一个有趣的问题，也许有人已经有了，我有一个使用display的列表：flex和flex-wrap：wrap。这也行得很好，我的问题是在我的li右侧设置了一个可见的图标，因此由于缺少空间和包装标志，li的宽度增加并且li移动到下方。到目前为止一切都很好，但是我也隐藏了onmouseleave中的图标，所以空间再次减少而且li跳回来，所以如果你能想象的话，这一切都会变得疯狂。下面的代码再现了问题，至少在我的显示器和crhome上，徘徊在最后一个li上。

var ul = document.getElementById("fileList");
let listItem = document.createElement("li");
listItem.setAttribute('id', "li");
listItem.textContent = "Crazy jumping";
listItem.onmouseover = function (event) {  
  let removeIcon = document.getElementById("remove");
  removeIcon.setAttribute('class', 'removeIconVisible');
  event.preventDefault();
  return false;
};

listItem.onmouseleave = function () {
  let idTemp = listItem.getAttribute("id");
  let id = idTemp.slice(2, idTemp.length);
  let removeIcon = document.getElementById("remove" + id);
  removeIcon.setAttribute('class', 'removeIcon');
  return false; // Prevents propagation of the event to the parents.
};

let removeButton = document.createElement('img');
removeButton.setAttribute('id', "remove");
removeButton.setAttribute('src', "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=");
removeButton.setAttribute('class', 'removeIcon');
listItem.appendChild(removeButton);
ul.appendChild(listItem);
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
            align-items: center;
            flex-wrap: wrap;
}

li {
   display: flex;
            font-family: sans-serif;
            background-color: gold;
            float: left;
            padding: 8px;
            margin-right: 8px;
            margin-bottom: 8px;
            border-radius: 10px;
            text-align: center;
            align-items: center;
}

li:hover {
  background-color: #FFFFFF;
}

.removeIcon {
    display: none;
    visibility: collapse;
}

.removeIconVisible {
    display: flex;
    visibility: visible;
}
        
</style>
</head>
<body>

<ul class="fileList" id="fileList">
  <li>
    <span class="text">Home</span>
  </li>
  <li>
    <span class="text">Home2</span>
  </li>
  <li>
    <span class="text">Home3</span>
  </li>
  <li>
    <span class="text">Home4</span>
  </li>
  <li>
    <span class="text">Home5</span>
  </li>
  <li>
    <span class="text">Home6Bigger</span>
  </li>
</ul>

</body>
</html>
javascript html css css3 flexbox
1个回答
0
投票

物品没有足够的空间来容纳图像（没有包装）。如果你想一想，“疯狂跳跃”并不是那么疯狂：

  1. 你徘徊和onmouseover被解雇了
  2. 添加图像并列出列表项
  3. 因为缺少空间会触发onmouseleave事件（鼠标不再悬停）
  4. 图像被移除，物品移回原位
  5. 一遍又一遍......

为了防止包装物品从列表中删除flex-wrap: wrap;。但这可能意味着物品不适合容器。

或者，您可以始终为图像保留空间。这意味着您始终渲染图像，默认隐藏它并在悬停时显示它。下面的示例使用CSS悬停来显示/隐藏图像：

let ul = document.getElementById("fileList");

// Create new list item
let listItem = document.createElement("li");
listItem.textContent = "Crazy jumping";

// Create remove icon
let removeIcon = document.createElement("img");
removeIcon.classList.add("removeIcon");
removeIcon.setAttribute("id", "remove");
removeIcon.setAttribute("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=");

// Append items
listItem.appendChild(removeIcon);
ul.appendChild(listItem);
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

li {
  display: flex;
  font-family: sans-serif;
  background-color: gold;
  float: left;
  padding: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 10px;
  text-align: center;
  align-items: center;
}

li:hover {
  background-color: #FFFFFF;
}

li:hover .removeIcon {
  visibility: visible;
}

.removeIcon {
  visibility: hidden;
}
<ul class="fileList" id="fileList">
  <li>
    <span class="text">Home</span>
  </li>
  <li>
    <span class="text">Home2</span>
  </li>
  <li>
    <span class="text">Home3</span>
  </li>
  <li>
    <span class="text">Home4</span>
  </li>
  <li>
    <span class="text">Home5</span>
  </li>
  <li>
    <span class="text">Home6Bigger</span>
  </li>
</ul>

编辑：

说“当鼠标在物品上没有包裹，只是溢出”或者类似的东西时，似乎不合逻辑。

就像我之前说的那样，从列表中删除flex-wrap: wrap以防止它被包装。您还可以通过添加white-space: nowrap来阻止文本换行（请参阅下面的示例）。

是不是可以在onmouseover设置一个属性？问题还在于什么财产？

我建议在可能的情况下使用CSS代替JavaScript，例如：隐藏在悬停等（例如上面的例子）。但是当然你可以使用onmouseover和onmouseleave事件来切换removeIconVisible类：

let ul = document.getElementById("fileList");

// Create new list item
let listItem = document.createElement("li");
listItem.textContent = "Crazy jumping";

// Create remove icon
let removeIcon = document.createElement("img");
removeIcon.classList.add("removeIcon");
removeIcon.setAttribute("id", "remove");
removeIcon.setAttribute("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=");

listItem.onmouseover = function () {  
  removeIcon.classList.add("removeIconVisible");
};

listItem.onmouseleave = function () {
  removeIcon.classList.remove("removeIconVisible");
};

// Append items
listItem.appendChild(removeIcon);
ul.appendChild(listItem);
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
  align-items: center;
  /*flex-wrap: wrap;*/
  white-space: nowrap;
}

li {
  display: flex;
  font-family: sans-serif;
  background-color: gold;
  float: left;
  padding: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 10px;
  text-align: center;
  align-items: center;
}

li:hover {
  background-color: #FFFFFF;
}

.removeIcon {
  display: none;
  visibility: collapse;
}

.removeIconVisible {
  display: flex;
  visibility: visible;
}
<ul class="fileList" id="fileList">
  <li>
    <span class="text">Home</span>
  </li>
  <li>
    <span class="text">Home2</span>
  </li>
  <li>
    <span class="text">Home3</span>
  </li>
  <li>
    <span class="text">Home4</span>
  </li>
  <li>
    <span class="text">Home5</span>
  </li>
  <li>
    <span class="text">Home6Bigger</span>
  </li>
</ul>

替代

您还可以将图标置于绝对位置，将其置于（屏蔽）悬停时的文本上。这样可以防止物品缠绕和溢出。

li {
  position: relative;
}

li:hover .removeIcon {
  background-color: white;
  position: absolute;
  right: 2px;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.