Jquery悬停在Draggable Div后如何恢复到原始CSS和Html？

Question

我想知道如何在悬停功能发生后将 CSS/Html 恢复为可拖动 Div 内的“Drag Me Around”文本的原始状态。

正如你所知，我是一个 javascript/jQuery 新手，我已经从各种来源整理了我现有的代码，我正在努力让它满足我的需求。

Draggable div 使用 jQuery UI。

请单击下面的 jsfiddle 链接以更好地了解我的意思。

https://jsfiddle.net/TEK22/79sgwxm5/28/

	$( function() {
	$( "#what-a-drag" ).draggable();
	} );


	$(".link-img").hover(function(){
	$(".img-show").html($(this).html());
	},
    function() {
	$( ".img-show" ).html( "Drag Me Around - (How to ake this go back to how it was?)" );
	});

p {
  width:auto;
}

p img {
  display: none;
  width: 200px; 
  height: 200px
}

p a {
  font-style: bold;
  text-decoration: underline ;
}

#what-a-drag {
  display: show;
  position: absolute;
  overflow: hidden;
  color: black;
  top: 20%;
  width: 200px;
  height: 200px;
  z-index: 1;
  background: rgba(255, 255, 255, .5);
  border: 2.2px solid black;
  color: black;
  cursor: move;
}

#drag-me{
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);


  font-family: Helvetica  !important;
  font-weight: 450  !important;
  font-size: 0.9em  !important;
  line-height: 0.2em !important;
  color: black  !important;
  text-align: center  !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="what-a-drag" class="img-show">
<p id="drag-me">Drag Me Around</p>
</div>

<p><a class="link-img"><img src="../">Hover on me </a> to show image in draggable div
</p>







<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 1

所以，发生的事情是当你过去（悬停在我身上）时，你正在更换你的

<p id="drag-me">Drag Me Around</p>

使用此代码

$(".img-show").html($(this).html());

解决这个问题的一种方法是用这个替换它，只需添加 p，这样你就可以替换 p 文本而不是 img-show 类中的 html。

$(".img-show p").html($(this).html());

然后要将文本更改回原来的内容，您需要将代码的最后一部分更改为此，再次添加 p。

$( ".img-show p" ).html( "Drag Me Around" );

有关工作示例，请参阅代码 sn-p 或 fiddle。

	$( function() {
	$( "#what-a-drag" ).draggable();
	} );


	$(".link-img").hover(function(){
	$(".img-show p").html($(this).html());
	},
    function() {
	$( ".img-show p" ).html( "Drag Me Around" );
	});

p {
  width:auto;
}

p img {
  display: none;
  width: 200px; 
  height: 200px
}

p a {
  font-style: bold;
  text-decoration: underline ;
}

#what-a-drag {
  display: show;
  position: absolute;
  overflow: hidden;
  color: black;
  top: 20%;
  width: 200px;
  height: 200px;
  z-index: 1;
  background: rgba(255, 255, 255, .5);
  border: 2.2px solid black;
  color: black;
  cursor: move;
}

#drag-me{
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);


  font-family: Helvetica  !important;
  font-weight: 450  !important;
  font-size: 0.9em  !important;
  line-height: 0.2em !important;
  color: black  !important;
  text-align: center  !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="what-a-drag" class="img-show">
<p id="drag-me">Drag Me Around</p>
</div>

<p><a class="link-img"><img src="../">Hover on me </a> to show image in draggable div
</p>







<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 2

你可以这样做

$( function() {
    $( "#what-a-drag" ).draggable();
} );

var cloneme = $('#drag-me').clone();
$(".link-img").hover(function(){
    $(".img-show").html($(this).html());
  },
  function() {
    $( ".img-show" ).html(cloneme);
  }
);

它会收回Drag Me Around文字

Answer 3

最好更换背景。但真正的元素是您想要捕获 div 的内容，然后在悬停后将它们放回原处。这可以使用.data() 来完成。例如：

$(function() {
  function showImage($target, url) {
    $target.data("original", $target.html());
    $target.html("");
    $target.css("background-image", "url('" + url + "')");
  }

  function hideImage($target) {
    $target.css("background-image", "");
    $target.html($target.data("original"));
  }

  $("#what-a-drag").draggable();
  $(".link-img").hover(function() {
    showImage($("#what-a-drag"), "https://i.imgur.com/ICiQTOV.jpg")
  }, function() {
    hideImage($("#what-a-drag"));
  });
});

p {
  width: auto;
}

p img {
  display: none;
  width: 200px;
  height: 200px
}

p a {
  font-style: bold;
  text-decoration: underline;
}

#what-a-drag {
  display: show;
  position: absolute;
  overflow: hidden;
  color: black;
  top: 20%;
  width: 200px;
  height: 200px;
  z-index: 1;
  background: rgba(255, 255, 255, .5);
  border: 2.2px solid black;
  color: black;
  cursor: move;
  background-size: cover;
  background-repeat: no-repeat;
}

#drag-me {
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: Helvetica !important;
  font-weight: 450 !important;
  font-size: 0.9em !important;
  line-height: 0.2em !important;
  color: black !important;
  text-align: center !important;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="what-a-drag" class="img-show">
  <p id="drag-me">Drag Me Around</p>
</div>

<p>
  <a class="link-img">Hover on me</a> to show image in draggable div
</p>

当悬停时，它会捕获 div 中的任何内容并将其存储。然后在外面，它把它替换回 div。

希望对你有帮助。