主页 / user-18688188

nwassom's questions

Martin Hope
nwassom
Asked: 2024-10-05 01:19:10 +0800 CST
  • 5

我有一个图标，只有当我将鼠标悬停在容器上时才会显示。它目前是相对位置，因为我需要它停留在容器内。虽然它是相对的，但它会将容器内的其他项目向下推；但是，我希望它们保持垂直居中。我知道我可以使用负边距来强制它们向上移动，但这通常被视为不好的做法，所以我正在尝试找出另一种方法来处理这个问题。

在此处输入图片描述

^^ 前端看起来是相对于位置的，图标停留在白色容器内。

在此处输入图片描述

^^ 前端在绝对位置时是什么样子的，无论我将图标定位在哪里，无论我将鼠标悬停在哪个容器上，它都会出现在屏幕上的同一位置。

这是容器滚动列表的反应代码

return (
        <div className="container mx-auto p-4">
            <h1 className="text-4xl font-bold text-center mb-6 text-amber-100">Task List</h1>
            <div className="overflow-x-auto  scrollbar-custom">
                <ul className="flex space-x-4 mb-10 blue" style={{ listStyleType: 'none', padding: 0 }}>
                    { tasks.map((task) =>
                        (
                            <li key={task.id} 
                                className="TaskBox bg-white shadow-lg shadow-amber-200/60 rounded-lg p-8 shadow-sm min-w-[300px] max-w-[300px] flex-shrink-0">
                                <div className="deleteTask">
                                    <DeleteTask task={task}/>
                                </div>
                                <div className="TaskInfo">
                                <h4 className="text-2xl font-semibold text-gray-800 mb-2">{task.title}</h4>
                                <p  className="text-sm text-gray-500 mb-2"
                                    >Created on: {new Date(task.createdAt).toLocaleDateString('en-US', {
                                    year: 'numeric',
                                    month: 'long',
                                    day: 'numeric'
                                })}</p>
                                <p className="text-gray-600 mb-4">{task.description}</p>
                                <p  className={`text-sm ${task.isCompleted ? 'text-green-500' : 'text-red-500'}`}>Completed: {task.isCompleted ? 'Yes' : 'No'}</p>
                                </div>
                            </li>
                        ))}
                </ul>
            </div>
        </div>
    );

代码的 CSS

.trashIcon
{
  width: 1.75em;
  height: 1.95em;
  color: indianred;
  transition: transform 0.15s ease;
}

.deleteTask:hover .trashIcon
{
  transform: scale(1.1);
  color: firebrick;
}

.deleteTask
{
   position: absolute !important;
   left: 50%;
   bottom: 12%;
   padding: 6px 6px;
   background-color: lightslategray;
   border-radius: 12px;
   transition: transform 0.15s ease;
   visibility: hidden;
}
.deleteTask:hover
{
  background-color: dimgrey;
}

.TaskBox:hover .deleteTask
{
   display: inline-block;
   transform: scale(1.1);
   visibility: visible;
}

.TaskInfo
{
  display: flex-column;
  justify-content: center;
  align-items: center;
}

.newTaskForm
{
  width: 50%;
}

我尝试切换到绝对位置，因为它不会影响其他 DOM 元素。我原本希望它停留在白色容器内，但它只停留在容器内，就像第一张使用相对位置的图片中所示的那样。

javascript