HTML树全宽悬停效果 [英] HTML tree full width hover effect

问题描述

我有一个html树，它主要由嵌套无序列表组成。

我需要为每个叶创建一个全宽悬浮效果，类似于windows文件

悬停效果是具有背景颜色和边框的< div /> p>

我制作了一个模拟全宽的黑客，但是横向边框不再可见。

有一个CSS技巧，我可以使用为了也保持横向边界的悬停效果，仍然有全宽？

我做了一个 jsfiddle 示例，因此更容易理解。

注意：
我无法更改html树结构或css，因为它是由第三方插件（kendo ui treeView）创建的，所以我需要找到一个解决方案

 <$ c $ 
 c> h6 {font-size：16px; font-weight：normal; margin-bottom：10px; margin-top：0; } 
 
 .tree {width：300px; border：1px solid＃000; padding：10px; margin-bottom：15px; } 
 .tree ul {margin：0; padding：0; list-style-type：none; } 
 .tree ul li {padding-left：16px; } 
 
 .tree li .item {position：relative; } 
 .tree li .item .overlay 
 {position：absolute; left：0; top：0; width：100％;高度：100％; 
 background-color：＃C5E7E6; display：none; border：1px solid red; } 
 .tree li .item：hover .overlay {display：block; } 
 
 / *全角hack * / 
 .tree.fullWidth {overflow：hidden; } 
 .tree.fullWidth li .item .overlay {left：-100px; width：1000px; } 
  

HTML

 < h6>标准重叠 - 非全宽< / h6> 
< div class =tree> 
< ul> 
< li> 
< div class =item> 
 Node 1 
< div class =overlay>< / div> 
< / div> 
< ul> 
< li> 
< div class =item selected> 
 Node 2 
< div class =overlay>< / div> 
< / div> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
 
< h6>全宽重叠（但边框不再显示）< / h6> 
< div class =tree fullWidth> 
< ul> 
< li> 
< div class =item> 
 Node 1 
< div class =overlay>< / div> 
< / div> 
< ul> 
< li> 
< div class =item selected> 
 Node 2 
< div class =overlay>< / div> 
< / div> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
  

解决方案

黑客。

CSS

  / * Full width hack * / 
 .tree.fullWidth {overflow：hidden; } 
 .tree.fullWidth li .item .overlay {right：-8px; width：314px; left：auto！important; } 
  

demo

如果树具有可变宽度，则更好：

  .tree.fullWidth li .item .overlay {
 right：-8px; 
 width：300px; 
 padding-left：14px; 
 left：auto！important; 
} 
  

它与其他版本完全一样，但现在的宽度是一样的树的宽度，所以Javascript不需要设置一个魔术宽度（你不知道从哪里来：

I have an html tree which is mostly consisting of nested unordered lists.

I need to create a full width hover effect for each leaf, something similar with windows file menu tree hover effect.

The hover effect is a <div/> with a background-color and a border.

I have made a hack which simulates the full width, but the sideways borders aren't visible anymore.

Is there a CSS trick that i can use in order to also keep the sideways borders of the hover effect and still have full width?

I have made a jsfiddle example, so is easier to understand.

Note: I can't change the html tree structure or css because it is created by a third party plugin (kendo ui treeView), so i need to find a solution using what i have.

CSS:

h6 { font-size: 16px; font-weight: normal; margin-bottom: 10px; margin-top: 0; }

.tree { width: 300px; border: 1px solid #000; padding: 10px; margin-bottom: 15px; }
.tree ul { margin: 0; padding: 0; list-style-type: none; }
.tree ul li { padding-left: 16px; }

.tree li .item { position: relative; }
.tree li .item .overlay
{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background-color: #C5E7E6; display: none; border: 1px solid red; }
.tree li .item:hover .overlay { display: block; }

/*Full width hack*/
.tree.fullWidth { overflow: hidden; }
.tree.fullWidth li .item .overlay { left: -100px; width: 1000px; }

HTML

<h6>Normal overlay - not full width</h6>
<div class="tree">
    <ul>
        <li>
            <div class="item">
                Node 1
                <div class="overlay"></div>
            </div>
            <ul>
                <li>
                    <div class="item selected">
                        Node 2
                        <div class="overlay"></div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

<h6>Full width overlay (but side borders aren't visible anymore)</h6>
<div class="tree fullWidth">
    <ul>
        <li>
            <div class="item">
                Node 1
                <div class="overlay"></div>
            </div>
            <ul>
                <li>
                    <div class="item selected">
                        Node 2
                        <div class="overlay"></div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

解决方案

A solution changing only the part of the CSS under "hack". I assume that at least you can change that

CSS

/*Full width hack*/
.tree.fullWidth { overflow: hidden; }
.tree.fullWidth li .item .overlay { right: -8px; width: 314px; left: auto !important; }

demo

If the tree has a variable width, this is better:

.tree.fullWidth li .item .overlay { 
    right: -8px; 
    width: 300px;
    padding-left: 14px; 
    left: auto !important; 
}

It works exactly like the other version, but now the width is the same that the tree width, so the Javascript doesn't need to set a magic width (that you don't know from where it comes:

这篇关于HTML树全宽悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！