简体   繁体   English

字幕div的z-index

[英]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>&nbsp;&nbsp;&nbsp;
      </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>&nbsp;&nbsp;&nbsp;
      </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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM