Question

我有一个可能有人已经遇到的有趣问题，我有一个使用display：flex和flex-wrap：wrap的列表。这也很好用，我的问题是我在li的右侧设置了一个li的onHover图标，该图标可见，因此由于缺少空间和包装标志，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>

Answer 1

该项目没有足够的空间来容纳图像（没有包装）。如果您考虑一下，“疯狂跳跃”并不是那么疯狂：

您将鼠标悬停并且onmouseover被解雇了
已添加图像，列表项环绕
由于空间不足，这会触发onmouseleave事件（鼠标不再悬停了）
图像被删除，项目移回原位
一遍又一遍...

为防止物品包装，请从列表中移除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;
}

与flex-wrap发生大小写冲突：在onHover上增加宽度时进行包装

1 个答案: