我想知道在悬停功能发生后,如何将CSS/Html恢复到其原始状态,以便在可拖动的Div中显示“Drag Me Around”文本。
正如你所知,我是一个javascript/jQuery的新手,我已经从各种来源整理了我的现有代码,我正在努力使其符合我的需求。
可拖动的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>
发布于 2018-10-31 01:13:08
所以,发生的事情是,当你过去(悬停在我身上)时,你正在更换你的
<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>
发布于 2018-10-31 01:14:02
你可以这样做
$( 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
文本
发布于 2018-10-31 06:42:00
最好是替换背景。但真正的元素是您希望捕获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。
我希望这能有所帮助。
https://stackoverflow.com/questions/53069311
复制相似问题