Как вернуться к оригинальному CSS и HTML после наведения Jquery в Draggable Div?

Question

Мне было интересно, как вернуть CSS / Html обратно в исходное состояние для текста «Перетаскивай меня» внутри Draggable Div после того, как появилась функция наведения.

Я немного новичок в javascript / jQuery, как вы можете сказать, и собрал мой существующий код из различных источников, и я пытаюсь заставить его работать вокруг моих потребностей.

Draggable div использует пользовательский интерфейс jQuery.

Пожалуйста, нажмите на ссылку 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

Вы можете сделать что-то вроде этого

$( 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 2

Лучше всего заменить фон. Но реальный элемент в том, что вы хотите перехватить содержимое 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.

Надеюсь, это поможет.

Answer 3

Итак, произошло то, что когда вы подошли (наведите на меня), вы заменили свой

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

с этим кодом

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

Одним из способов решения этой проблемы является его замена на это, просто добавьте p, чтобы вы заменяли текст p вместо HTML внутри класса img-show.

$(".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>