javascript - 使可调整大小的图标粘在动态大小的 div 的底部

Question

我正在尝试处理一个由鼠标悬停信息填充的 div。

它填充到的 div 既可以调整大小也可以拖动，而且效果很好。我的小问题是当盒子 flex 时，可调整大小的图标留在原处。

我想看看是否可以让可调整大小的图标在 div 变大时保留在底部？

$(".btn").mouseenter(function() {
  $("#thepoem").html($(this).val());

});
$(".btn").mouseleave(function() {
  $("#thepoem").empty();
});

$("#superresizablediv").resizable();
$("#superresizablediv").draggable();

#superresizablediv {
  position: absolute;
  top: 15%;
  left: 5%;
  min-width: 250px;
  min-height: 50px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 1
}

#thepoem {
  display: flex;
  display: inherit;
  min-height: 50px;
  min-width: 250px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
      visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
    Eagerly I wished the morrow;—vainly I had sought to borrow
    From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
            Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
  <div id="thepoem"></div>
</div>

Answer 1

您需要在 mouseenter 上更新 #superresizablediv 的高度并在 mouseleave 上重置高度

var height = '';

$(".btn").mouseenter(function() {
  height = $("#superresizablediv").outerHeight();
  $("#thepoem").html($(this).val());
  $("#superresizablediv").height($("#thepoem").outerHeight())

});
$(".btn").mouseleave(function() {
  $("#thepoem").empty();
  $("#superresizablediv").height(height)
});

$("#superresizablediv").resizable();
$("#superresizablediv").draggable();

#superresizablediv {
  position: absolute;
  top: 15%;
  left: 5%;
  min-width: 250px;
  min-height: 50px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 1
}

#thepoem {
  display: flex;
  display: inherit;
  min-height: 50px;
  min-width: 250px;
  background-color: #5fc0e3;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “’Tis some
      visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button>
<button class="btn" value="Ah, distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
    Eagerly I wished the morrow;—vainly I had sought to borrow
    From my books surcease of sorrow—sorrow for the lost Lenore—
For the rare and radiant maiden whom the angels name Lenore—
            Nameless here for evermore.">The raven verse 2</button>
<div id="superresizablediv" class="ui-resizable-se">
  <div id="thepoem"></div>
</div>