微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

将div放在悬停div的右上角

分类：编程问答

如何解决将div放在悬停div的右上角

我有什么

我已经为用户任务创建了调度程序。可以使用拖放来移动任务。该表具有固定的第一列和第一行。

问题

当您将鼠标悬停在任务上时，我试图添加编辑并删除按钮。编辑按钮需要显示在任务div的右上角。

我尝试在CSS中使用position属性的display和position，但是由于某种原因，我无法在右边的其他任务之前获得prepended div。

当前代码： 

// MY HOVER - ADD / REMOVE FUNCTION
$(".drag").hover(
  function () {
    var isAdmin = 1;
    if (isAdmin == 1) {
      $(this).prepend('<div class="test"><i class="fas fa-pen"></i></div>');
    }
  },function () {
    //this is fired when the mouse hovers out
    $(this).find(".test").remove();
  }
);

$(".drag").draggable({
  revert: "invalid",start: function (e,ui) {
    $(this).data("oldDate",$(this).parent().data("date1"));
  }
});
$("td[data-date1]").droppable({
  drop: function (e,ui) {
    console.log();
    var drag = ui.draggable,drop = $(this),oldDate = drag.data("oldDate"),newDate = drop.data("datum1"),dragID = drag.data("userid"),dropID = drop.data("userid");
    if (oldDate != newDate || dragID != dropID) {
      $(drag).detach().css({ top: 0,left: 0 }).appendTo(drop);
      var post = true,drop = 3;
    } else {
      return $(drag).css({
        top: 0,left: 0
      });
    }
  }
});
.test {
  height: 25px;
  width: 25px;
  line-height: 25px;
  top: 0px;
  right: -150px;
  display: inline-block;
  position: relative;
  background-color: #FFF;
  color: #FF8E00;
  text-align: center;
  font-size: 13px;
  Box-shadow: 1px 1px 3px #B5B5B5;
  cursor: pointer;
}

.test:hover {
  color: #FFF;
  background-color: #FF8E00;
}







/* LOCK HEADER AND FirsT COLUMN */
.table td,.table th {
  padding: 5px!important;
}
th:first-child {
  position: sticky;
  left: 0;
  z-index: 30;
}
td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 20;
}
/* ---------- END (LOCK HEADER AND FirsT COLUMN ) --------- */

.datetimepicker {
  width: 70% !important;
  height: 70% !important;
}

.cal-container {
  max-width: 900px;
  max-height: 500px;
  overflow: auto;
  margin: auto;
}
.cal-table {
  position: relative;
  border: solid #ebebeb;
  border-width: 0 1px 0 0;
  overscroll-behavior: contain;
}
.cal-thead {
  top: 0px;
  Box-shadow: 0 10px 50px rgba(0,0.04);
}

.cal-viewmonth {
  font-size: 16px;
  background: #fdfdfd;
  width: 150px;
  height: 50px;
}
.cal-toprow {
  width: 182px;
  min-width: 182px;
  color: #3e5569;
  background-color: #f7f9fb !important;
  border: 1px solid #ebebeb !important;
}

.cal-viewmonth,.cal-toprow {
  font-weight: 700 !important;
  text-align: center;
  vertical-align: middle !important;
}

.cal-userinfo {
  height: 80px;
  Box-shadow: 20px 0 50px rgba(0,0.05);
}

.cal-tbody .cal-userinfo {
  min-width: 150px !important;
  text-align: right;
  color: hsla(210,5%,40%,1);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  background: #fdfdfd;
  padding: 0.3em;
  border: 1px solid #ebebeb;
}

.cal-usersheader {
  height: 20px;
  Box-shadow: 20px 0 50px rgba(0,0.05);
  min-width: 150px !important;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 0.3em;
}

.weekend {
  background-color: #b5b5b5;
}
.drag {
  z-index: 10;
  cursor: all-scroll;
}
.span-info {
  display: inline-block;
  padding: 0.25em 0.4em;
  text-align: center;
  white-space: Nowrap;
  vertical-align: baseline;
  width: 25px;
  background-color: red;
  cursor: pointer;
}

.ui-draggable-dragging {
  z-index: 9999 !important;
}

.cal-usercounter {
  bottom: 0;
  right: 0;
  position: absolute;
  text-align: right;
  border-radius: 0px;
  border: 2px thick red;
}

.cal-userbadge {
  border-radius: 0;
  font-weight: 600;
  font-size: 11px;
}

/* USER TASKS */
.details {
  border-radius: 4px;
  background: #fff;
  Box-shadow: 0 10px 40px rgba(0,0.08);
  border: 1px solid #ebecee;
  padding: 0px 0px 5px 10px;
  margin: 2px;
  z-index: 1;
}

.details-uren {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  margin: 0;
  right: 0px;
  text-align: right;
  padding-right: 10px;
}

.details-task {
  margin-top: 5px;
  margin-bottom: 2px;
  font-size: 12px;
  padding: 2px 5px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 2px;
  width: 94%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <div style="max-height: 200px; max-width: 300px; margin-bottom: 0;">
    <div class="cal-sectionDiv">
      <table class="table table-striped table-bordered">
        <thead class="cal-thead">
          <tr>
            <th class="cal-viewmonth" id="changemonth">juli 2020</th>
            <th class="cal-toprow">Wednesday 1</th>
            <th class="cal-toprow">Thursday 2</th>
            <th class="cal-toprow">Friday 3</th>
            <th class="cal-toprow weekend">Saturday 4</th>
            <th class="cal-toprow weekend">Sunday 5</th>
             <th class="cal-toprow">Monday 6</th>
            <th class="cal-toprow weekend">Thuesday 7</th>
            <th class="cal-toprow weekend">Wednesday 8</th>
          </tr>

        </thead>
        <tbody class="cal-tbody">
          <tr id="u1">
            <td class="cal-userinfo">
              <span><b style="text-decoration: underline">Van Els</b> Numan<span></span></span>
              <div class="cal-usercounter">
                <span class="cal-userbadge badge badge-light">140:13</span><span class="cal-userbadge badge badge-warning">134:36</span>
              </div>
              <div class="cal-userarrows">
                <i class="up mdi mdi-arrow-up-bold"></i><i class="down mdi mdi-arrow-down-bold"></i>
              </div>
            </td>
            <td class="ui-droppable" data-date1="1/7/2020" data-userid="1">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="13956" data-userid="1" style="border-left: 5px solid rgb(81,255,0); position: relative;">
                <h3 class="details-task" style=" background: #51FF00; color: #000000">Training</h3>
                <div class="details-uren">
                  15:00 - 16:30
                </div>
              </div>
            </td>
            <td class="ui-droppable" data-date1="2/7/2020" data-userid="1">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="13957" data-userid="1" style="border-left: 5px solid rgb(121,32,32); position: relative;">
                <h3 class="details-task" style=" background: #792020; color: #FFFFFF">Day Shift</h3>
                <div class="details-uren">
                  00:00 - 00:00
                </div>
              </div>
            </td>
            <td class="ui-droppable" data-date1="3/7/2020" data-userid="1">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="13959" data-userid="1" style="border-left: 5px solid rgb(175,0); position: relative;">
                <h3 class="details-task" style=" background: #AF0000; color: #FFFFFF">Sick</h3>
                <div class="details-uren">
                  00:00 - 00:00
                </div>
              </div>
            </td>
            <td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="1">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="13958" data-userid="1" style="border-left: 5px solid rgb(36,115,171); position: relative;">
                <h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
                <div class="details-uren">
                  07:30 - 16:30
                </div>
              </div>
            </td>
            <td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="1">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12179" data-userid="1" style="border-left: 5px solid rgb(30,137,90); position: relative;">
                <h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
                <div class="details-uren">
                  00:00 - 00:00
                </div>
              </div>
            </td>
            <td class="ui-droppable" data-date1="6/7/2020" data-userid="1"></td>
            <td class="ui-droppable" data-date1="7/7/2020" data-userid="1"></td>
            <td class="ui-droppable" data-date1="8/7/2020" data-userid="1"></td>
          </tr>
          <tr id="u2">
            <td class="cal-userinfo">
              <span><b style="text-decoration: underline">Henzen</b> Susanna<span></span></span>
              <div class="cal-usercounter">
                <span class="cal-userbadge badge badge-light">140:13</span><span class="cal-userbadge badge badge-warning">134:36</span>
              </div>
              <div class="cal-userarrows">
                <i class="up mdi mdi-arrow-up-bold"></i><i class="down mdi mdi-arrow-down-bold"></i>
              </div>
            </td>
            <td class="ui-droppable" data-date1="1/7/2020" data-userid="2"></td>
            <td class="ui-droppable" data-date1="2/7/2020" data-userid="2">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12326" data-userid="2" style="border-left: 5px solid rgb(36,171); position: relative;">
                <h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
                <div class="details-uren">
                  11:00 - 18:00
                </div>
              </div>
            </td>
            <td class="ui-droppable" data-date1="3/7/2020" data-userid="2">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="11978" data-userid="2" style="border-left: 5px solid rgb(255,184,72); position: relative;">
                <h3 class="details-task" style=" background: #FFB848; color: #000000">Late shift</h3>
                <div class="details-uren">
                  17:00 - 00:00
                </div>
              </div>
            </td>
            <td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="2">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12189" data-userid="2" style="border-left: 5px solid rgb(189,0); position: relative;">
                <h3 class="details-task" style=" background: #BD0000; color: #FFFFFF">Extra shift</h3>
                <div class="details-uren">
                  21:00 - 04:00
                </div>
              </div>
            </td>
            <td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="2">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12169" data-userid="2" style="border-left: 5px solid rgb(30,90); position: relative;">
                <h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
                <div class="details-uren">
                  00:00 - 00:00
                </div>
              </div>
            </td>
            <td class="ui-droppable" data-date1="6/7/2020" data-userid="1"></td>
            <td class="ui-droppable" data-date1="7/7/2020" data-userid="1"></td>
            <td class="ui-droppable" data-date1="8/7/2020" data-userid="1"></td>
          </tr>
          <tr id="u3">
            <td class="cal-userinfo">
              <span><b style="text-decoration: underline">Mak</b> Lokman<span></span></span>
              <div class="cal-usercounter">
                <span class="cal-userbadge badge badge-light">140:13</span><span class="cal-userbadge badge badge-warning">134:36</span>
              </div>
              <div class="cal-userarrows">
                <i class="up mdi mdi-arrow-up-bold"></i><i class="down mdi mdi-arrow-down-bold"></i>
              </div>
            </td>
            <td class="ui-droppable" data-date1="1/7/2020" data-userid="3">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12938" data-userid="3" style="border-left: 5px solid rgb(36,171); position: relative;">
                <h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
                <div class="details-uren">
                  12:00 - 19:00
                </div>
              </div>
            </td>
            <td class="ui-droppable" data-date1="2/7/2020" data-userid="3">
            </td>
            <td class="ui-droppable" data-date1="3/7/2020" data-userid="3">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12266" data-userid="3" style="border-left: 5px solid rgb(36,171); position: relative;">
                <h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
                <div class="details-uren">
                  05:00 - 12:00
                </div>
              </div>
            </td>
            <td class="weekend ui-droppable" data-date1="4/7/2020" data-userid="3">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12286" data-userid="3" style="border-left: 5px solid rgb(36,171); position: relative;">
                <h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
                <div class="details-uren">
                  07:00 - 14:00
                </div>
              </div>
            </td>
            <td class="weekend ui-droppable" data-date1="5/7/2020" data-userid="3">
              <div class="drag details ui-draggable ui-draggable-handle" data-taskid="12107" data-userid="3" style="border-left: 5px solid rgb(126,126,126); position: relative;">
                <h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
                <div class="details-uren">
                  00:00 - 00:00
                </div>
              </div>
            </td>
            <td class="ui-droppable" data-date1="6/7/2020" data-userid="1"></td>
            <td class="ui-droppable" data-date1="7/7/2020" data-userid="1"></td>
            <td class="ui-droppable" data-date1="8/7/2020" data-userid="1"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

解决方法

测试按钮已使用CSS绝对定位。

}

还必须增加z-index项，使其在悬停时位于其他div之上。

解决了z-index问题？通过增加th和td：first-child的z-index。

top: 0px;
right: -24px;
position: absolute;

// MY HOVER - ADD / REMOVE FUNCTION
$(".drag").hover(
  function () {
    var isAdmin = 1;
    if (isAdmin == 1) {
      $(this).css("z-index","9999").prepend('<div class="test"><i class="fas fa-pen"></i></div>');
    }
  },function () {
    //this is fired when the mouse hovers out
    $(this).css("z-index","0").find(".test").remove();
  }
);

$(".drag").draggable({
  revert: "invalid",start: function (e,ui) {
    $(this).data("oldDate",$(this).parent().data("date1"));
  }
});
$("td[data-date1]").droppable({
  drop: function (e,ui) {
    console.log();
    var drag = ui.draggable,drop = $(this),oldDate = drag.data("oldDate"),newDate = drop.data("datum1"),dragID = drag.data("userid"),dropID = drop.data("userid");
    if (oldDate != newDate || dragID != dropID) {
      $(drag).detach().css({ top: 0,left: 0 }).appendTo(drop);
      var post = true,drop = 3;
    } else {
      return $(drag).css({
        top: 0,left: 0
      });
    }
  }
});
.test {
  height: 25px;
  width: 25px;
  line-height: 25px;
  top: 0px;
  right: -24px;
  position: absolute;
  background-color: #FFF;
  color: #FF8E00;
  text-align: center;
  font-size: 13px;
  box-shadow: 1px 1px 3px #B5B5B5;
  cursor: pointer;
}

.test:hover {
  color: #FFF;
  background-color: #FF8E00;
}







/* LOCK HEADER AND FIRST COLUMN */
.table td,.table th {
  padding: 5px!important;
}
th:first-child {
  position: sticky;
  left: 0;
  z-index: 10030;
}
td:first-child {
  position: sticky;
  left: 0;
  z-index: 10010;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 10020;
}
/* ---------- END (LOCK HEADER AND FIRST COLUMN ) --------- */

.datetimepicker {
  width: 70% !important;
  height: 70% !important;
}

.cal-container {
  max-width: 900px;
  max-height: 500px;
  overflow: auto;
  margin: auto;
}
.cal-table {
  position: relative;
  border: solid #ebebeb;
  border-width: 0 1px 0 0;
  overscroll-behavior: contain;
}
.cal-thead {
  top: 0px;
  box-shadow: 0 10px 50px rgba(0,0.04);
}

.cal-viewmonth {
  font-size: 16px;
  background: #fdfdfd;
  width: 150px;
  height: 50px;
}
.cal-toprow {
  width: 182px;
  min-width: 182px;
  color: #3e5569;
  background-color: #f7f9fb !important;
  border: 1px solid #ebebeb !important;
}

.cal-viewmonth,.cal-toprow {
  font-weight: 700 !important;
  text-align: center;
  vertical-align: middle !important;
}

.cal-userinfo {
  height: 80px;
  box-shadow: 20px 0 50px rgba(0,0.05);
}

.cal-tbody .cal-userinfo {
  min-width: 150px !important;
  text-align: right;
  color: hsla(210,5%,40%,1);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  background: #fdfdfd;
  padding: 0.3em;
  border: 1px solid #ebebeb;
}

.cal-usersheader {
  height: 20px;
  box-shadow: 20px 0 50px rgba(0,0.05);
  min-width: 150px !important;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 0.3em;
}

.weekend {
  background-color: #b5b5b5;
}
.drag {
  z-index: 10;
  cursor: all-scroll;
}
.span-info {
  display: inline-block;
  padding: 0.25em 0.4em;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  width: 25px;
  background-color: red;
  cursor: pointer;
}

.ui-draggable-dragging {
  z-index: 9999 !important;
}

.cal-usercounter {
  bottom: 0;
  right: 0;
  position: absolute;
  text-align: right;
  border-radius: 0px;
  border: 2px thick red;
}

.cal-userbadge {
  border-radius: 0;
  font-weight: 600;
  font-size: 11px;
}

/* USER TASKS */
.details {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0.08);
  border: 1px solid #ebecee;
  padding: 0px 0px 5px 10px;
  margin: 2px;
  z-index: 1;
}

.details-uren {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  margin: 0;
  right: 0px;
  text-align: right;
  padding-right: 10px;
}

.details-task {
  margin-top: 5px;
  margin-bottom: 2px;
  font-size: 12px;
  padding: 2px 5px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 2px;
  width: 94%;
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot