Question

我不确定这是一个传播问题和设计缺陷一样多，而且我已经知道传播问题在所有方面都是泡沫破灭，但在这里。我有一个表编辑网格。

每个单元格包含两个主要块：编辑div（包含用于编辑显示值的表单）＆amp; view div（包含显示值）。所有溢出都隐藏起来，以使每一行具有相同的高度。

在加载时不显示编辑div并且显示视图div。在悬停时，将显示单元格编辑div，而不显示视图值。

在手机/平板电脑上悬停不起作用，因此单元格上需要点击才能从视图切换到编辑等方式。

编辑视图包含可点击元素（在本例中为标签）时出现问题。在手机/平板电脑上，如果点击这些可点击元素的坐标，则会点击这些元素。

<td  class="editGridCell" ng-if="!block && ($index > 0)" ng-repeat="attobj in columns track by $index">
  <div class="contentEdit">    
    <form name="theForm" novalidate>
      <div ng-if="true"  ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
      </div>
    </form>
  </div>

  <div ng-class="compressed ? 'contentValues' : 'contentValuesDecompressed'">
    <div  ng-repeat="v in dbo.get4(attobj.key) track by $index">
      <p ng-if="v.cid">{{ v.displayName() }}</p>
      <p ng-if="!v.cid">{{ v }}</p>
    </div> 
  </div>
</td>

表单调用的模板包含可单击的标记：

<script type="text/ng-template" id="form_field_ref">
  <div ng-init="tmp = dbo.get(attobj.name)">
    <div ng-model="tmp" ui-sortable="{ 'ui-floating': undefined}" class="clearfix">
      <div ng-repeat="dbo2 in dbo.get(attobj.name) track by $index" style="float:left; padding-right: 3px; padding-bottom: 5px;">
        <div class="tag sortableTag">
          <a href="#/view/{{ dbo2.cid }}" target="_blank">{{ dbo2.displayName() }}</a>
          <a href="" class="glyphicon glyphicon-remove" ng-click="removeValue(dbo, attobj.name, $index)"></a>
        </div>
      </div>
    </div>
  </div>

  <div ng-include="'typeaheadtemplate'" style="width: 100%;"></div>
</script>

的CSS：

.superResponsive .editGridCell{
  border: 1px solid lightBlue;
  vertical-align: top;
  position: relative;
}

.contentEdit{
  display:none;
  overflow: hidden;
  padding:4px;

}

.contentValues{
  display:block;
  color:#0887A7!important;
  min-height: 20px;
  overflow: hidden;
  /*min-width:100px;*/
  width:100%;
  height: 25px;
  padding: 5px;
}
.contentValuesDecompressed{
  display:block;
  color:#0887A7!important;
  min-height: 25px;
  overflow: visible;
  /*min-width:100px;*/
  width:100%;
  height: auto;
  padding: 5px;
}

.contentDecompressed{
    color:#0887A7!important;
    min-height: 25px;
    overflow: visible;
    width:auto;
    height: auto;
    padding: 5px;
}

.editGridCell:hover .contentEdit{
  display: block;
  height:auto;
  width: 90%;
  background:#d8ecf2;
  position:absolute;
  z-index: 40;
  overflow: visible;
}

.editGridCell:hover .contentValuesDecompressed{
  visibility: hidden;
}

.editGridCell:hover .contentValues{
  visibility: hidden;
  overflow:visible;
}

在PHONES上我点击CELL＆amp;标签被点击（如果标签将显示）！

简化问题：

http://jsfiddle.net/coolcatDev/yqjzvcyw/

Answer 1

我可以延迟悬停效果，如：

HTML：

<div class="aDiv">
    <a class="aLink" href="https://google.com">Link</a>
</div>

的CSS：

.aDiv{
    border:1px solid black;
    width:100px;
}
.aLink{
    visibility:hidden;
}
.aDiv:hover .aLink{
    visibility:visible;
    transition-delay: .5s;
}

http://jsfiddle.net/coolcatDev/yqjzvcyw/12/

停止传播：泡沫下降？

1 个答案: