Question

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

我是位javascript / jQuery新手，您可以说一下，并已整理了来自各种来源的现有代码，我正在努力使其能够满足我的需求。

Draggable div使用jQuery UI。

请点击下面的jsfiddle链接以检查我的意思。

cfinvoke

	$( 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;
}

Answer 1

所以，发生的是，当您过去时（将鼠标悬停在我身上），您正在替换

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

使用此代码

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

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

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

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

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

有关工作示例或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。

我希望有帮助。

在Draggable Div中将Jquery悬停后，如何恢复到原始CSS和HTML？

3 个答案: