文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在Jquery悬停在Draggable Div中后恢复到原来的CSS和Html？

问如何在Jquery悬停在Draggable Div中后恢复到原来的CSS和Html？
EN

Stack Overflow用户
提问于 2018-10-31 00:55:14
回答 3查看 302关注 0票数 0

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

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

可拖动的div使用jQuery UI。

请点击下面的jsfiddle链接，看看我的意思是更好。

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

​

代码语言：javascript
复制
	$( 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?)" );
	});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

jquery-hover
jquery
jquery-ui
hover
draggable
EN

回答 3

Stack Overflow用户

发布于 2018-10-31 01:13:08

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

代码语言：javascript
复制
<p id="drag-me">Drag Me Around</p>

使用下面的代码

代码语言：javascript
复制
$(".img-show").html($(this).html());

一种解决方法是将其替换为这个，只需添加p，这样您就可以替换img-show类中的p文本而不是html。

代码语言：javascript
复制
$(".img-show p").html($(this).html());

然后，为了把文本改回原来的样子，你需要把代码的最后一部分改成这样，也就是添加p。

代码语言：javascript
复制
$( ".img-show p" ).html( "Drag Me Around" );

有关工作示例或fiddle，请参阅代码片段。

​

代码语言：javascript
复制
	$( function() {
	$( "#what-a-drag" ).draggable();
	} );


	$(".link-img").hover(function(){
	$(".img-show p").html($(this).html());
	},
    function() {
	$( ".img-show p" ).html( "Drag Me Around" );
	});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-10-31 01:14:02

你可以这样做

代码语言：javascript
复制
$( 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文本

票数 0
EN

Stack Overflow用户

发布于 2018-10-31 06:42:00

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

​

代码语言：javascript
复制
$(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"));
  });
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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。

我希望这能有所帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53069311

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档