[英]z-index for caption div
I have a problem with creating 2 elements with different z-index
. 我在创建2个具有不同
z-index
元素时遇到问题。
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.capty.css">
<script src="jquery.capty.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-jesse.css">
<script type="text/javascript" src="jquery-jesse.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fix').capty({
cWrapper: 'capty-tile',
height: 36,
opacity: .6
});
$('#list').jesse();
});
</script>
<style>
#list {
max-width: 640px;
margin: 20px auto;
}
div.capty-caption {
z-index: 999;
}
</style>
<title></title>
</head>
<body>
<ul class="jq-jesse" id="list">
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' target='_blank'><img class="fix" name="#content-target-1" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' width='100' height='100'></a>
<div id="content-target-1">
<a href="#">[x]</a>
</div>
</li>
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' target='_blank'><img class="fix" name="#content-target-2" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' width='100' height='100'></a>
<div id="content-target-2">
<a href="#">[x]</a>
</div>
</li>
</ul>
</body>
</html>
Example: http://plnkr.co/edit/8HSgSbc96LlSQ66hgY79?p=info 示例: http : //plnkr.co/edit/8HSgSbc96LlSQ66hgY79?p = info
How can I intercept a click on the caption? 如何截获字幕的点击? I'm trying to set
z-index: 999
for div capty-caption
, but it's not working for me. 我正在尝试将div
capty-caption
设置为z-index: 999
,但它对我不起作用。
The event you are looking for is well described in Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse 您要查找的事件在用于列表的拖放排序的简单jQuery插件中已得到很好的描述-jesse
$('#list').jesse({ // executed when the item has dropped onStop: function(position, prevPosition, item) { alert('ok'); } });
The onStop is executed at the end of mouseup event. onStop在mouseup事件结束时执行。 If you do not need this but only the click event you may always use (I discourage you to follow this path):
如果您不需要此操作,而仅需单击事件,则可以一直使用(我不鼓励您遵循此路径):
$('#list').mouseup(function(e) { alert('ok'); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.