运行代码片段以了解我的意思。我不明白为什么我不能使用鼠标选择/突出显示其中的任何文本<div class="attributes">。我可以在整个div上拖动以选择全部，但不能选择文本本身的一部分。我尝试设置z-index，但没有做任何更改，因此我将其取出。
此元素层次结构有问题吗？
<div class="hierarchy">
<ul>
<li class="id ">
<div class="attributes">
<div class="col description"> ... 等等。我已经在Mac上的Firefox，Chrome和Safari中尝试过此操作，但是没有运气。
div.id_text {
display: inline-block;
width: 6em;
}
div.hierarchy ul {
padding: 0;
margin: 0.5em;
border-style: solid;
border-width: 1px;
border-color: lightgray;
}
div.hierarchy ul ul {
margin-left: 2em;
}
div.hierarchy li {
list-style: none;
padding: 0.5em;
pointer-events: none;
}
div.hierarchy li:nth-child(even) {
background-color: #eaeaea;
}
div.hierarchy li:nth-child(odd) {
background-color: white;
}
div.hierarchy li:before {
pointer-events: all;
color: blue;
}
div.hierarchy li.id:before {
display: inline-block;
margin-right: 0.5em;
font-family: FontAwesome;
content: "\f078";
}
div.hierarchy li.id_collapsed:before {
transform: rotate(270deg);
}
div.hierarchy li.id_leafNode:before {
display: inline-block;
color: black;
}
div.hierarchy li.id_collapsed ul {
display: none;
}
div.attributes {
display: inline-table;
float: right;
width: calc(100% - 8em);
}
div.col {
display: table-cell;
/*! padding-left: 1em; */
/*! padding-right: 1em; */
width: 25%;
padding-left: 0.5em;
padding-right: 0.5em;
}<div class="hierarchy">
<ul>
<li class="id ">
<div class="id_text">36205</div>
<div class="attributes">
<div class="col description">My Assembly</div>
<div class="col mpn">555</div>
<div class="col qty">undefined</div>
<div class="col refdes">undefined</div>
</div>
<ul id="36205">
<li class="id_leafNode">
<div class="id_text">36184</div>
<div class="attributes">
<div class="col description">mydesc2</div>
<div class="col mpn">mympn2</div>
<div class="col qty">1000</div>
<div class="col refdes">null</div>
</div>
</li>
<li class="id">
<div class="id_text">36203</div>
<div class="attributes">
<div class="col description">Parent part</div>
<div class="col mpn">1234</div>
<div class="col qty">10</div>
<div class="col refdes">2
</div>
</div>
<ul id="36203">
<li class="id_leafNode">
<div class="id_text">36184</div>
<div class="attributes">
<div class="col description">mydesc2</div>
<div class="col mpn">mympn2</div>
<div class="col qty">99</div>
<div class="col refdes">Test</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36185</div>
<div class="attributes">
<div class="col description">mydesc3</div>
<div class="col mpn">mympn3</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36186</div>
<div class="attributes">
<div class="col description">mydesc4</div>
<div class="col mpn">mympn4</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36187</div>
<div class="attributes">
<div class="col description">mydesc5</div>
<div class="col mpn">mympn5</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36188</div>
<div class="attributes">
<div class="col description">mydesc6</div>
<div class="col mpn">mympn6</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
<li class="id_leafNode">
<div class="id_text">36189</div>
<div class="attributes">
<div class="col description">mydesc7</div>
<div class="col mpn">mympn7</div>
<div class="col qty">1</div>
<div class="col refdes">
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>pointer-events从中删除div.hierarchy li
或全部改变
div.hierarchy li {
list-style: none;
padding: 0.5em;
pointer-events: all;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句